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

Question

我有一堆想要在网格中整齐显示的图像。 其实图像接近正方形（但其中一些在高一些PIX关闭）

显然是很容易的，只是将它们通过CSS， 一个固定的宽度和高度，但我想与它们进行缩放容器的宽度。

我把它们安排在一个表格中（或在内联divs - 对于问题无关紧要） 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; 
}