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

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

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

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

Answer 1

我会用带有百分比和 div 类型行的纯 css 来做

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

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