1

我有一堆图像，我想在网格中整齐地显示。实际上图像接近正方形（但其中一些在高度上偏离了一些像素）

通过css将它们设置为固定的宽度和高度显然很容易，但我想用容器的宽度来缩放它们。

我将它们安排在一个表格中（或内联 div 内——对问题无关紧要） img.width:100% 在这里没有帮助。由于它还缩放高度，所以我们最终会为所有图像提供一些不同的高度。设置 img.height:100% 也无济于事，因为它们不再是方形的。

我最终通过咖啡脚本调整了这个。但我的问题是，如果真的没有办法用纯 css 来实现这一点。

我的解决方案是将 .square_all 作为标记附加到容器，然后检索容器的第一个图像的宽度，并将其设置为容器中所有图像的高度。

未经现场测试，对我有用

square_all.coffee：

#
# make all images in a group the same height as the first's width
#
$ ->
    square_all  = ->
        size   = $('.square_all').each (index, element) ->
            imgs    = $(element).find('img')
            size    = imgs.first().width()
            imgs.height size
            true
    square_all()
    $(window).bind 'resize', (event) -> square_all()

边注：

将 imgs 的宽度也设置为 size 可能很诱人，但这不起作用。因为您的图像将具有固定宽度，而不是宽度：100%，所以它们将不再适应容器的宽度。

在我的环境中，我们按宽度缩小图像，使它们的宽度都相同，但我们按比例缩放高度。

我不关心这个解决方案中的高度，我只是缩放高度。在其他情况下，裁剪高度可能更合适。

4

1 回答 1

0

我会在纯 CSS 中使用百分比和 div 类型行

演示http://jsfiddle.net/kevinPHPkevin/R8Rrf/

.row {
    width:100%;
}
img {
    width:18%;
    max-width:100px;
}
于 2013-08-02T22:02:44.683 回答