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

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的宽度也设置为大小可能很诱人， 但这不起作用。因为您的图像将具有固定的宽度， 而不是 width:100%，因此它们将不再适应容器的宽度。

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

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

Answer 1

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

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

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