在響應式佈局中顯示網格中的方形圖像

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; 
}