Question

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

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

我将它们安排在一个表格中（或在内联div中 - 对问题无关紧要） img.width：100％在这里没有帮助。既然它也可以缩放高度，所以我们最终得到了所有图像的不同高度。设置img.height：100％也没有帮助，因为它们不再是正方形。

我终于通过coffescript调整了这个。但我的问题是，如果真的没有办法用纯粹的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的宽度设置为大小可能很诱人，但这不起作用。因为你的图像将具有固定的宽度，而不是宽度：100％，因此它们将不再适应容器的宽度。

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

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

Answer 1

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

DEMO http://jsfiddle.net/kevinPHPkevin/R8Rrf/

.row {
    width:100%;
}
img {
    width:18%;
    max-width:100px;
}

在响应式布局中以网格显示方形图像

1 个答案: