如何對齊不同高度的圖像行？

我爲我的CSS使用引導程序。我有車把環，其中，I並排放置的許多圖像側：如何對齊不同高度的圖像行？

<div class="row"> 
    {{#each imageData}} 
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2 center"> 
     <img src="{{url}}"> 
     <p>{{title}}</p> 
    </div> 
    {{/each}} 
</div>

不幸的是，一些圖像是不同的尺寸。我設置了以下css：

img最大寬度：100％;最大寬度：100％。 max-height：400px; }

但現在一些行具有預期的圖像數量，其他行數量會更少（取決於具有相同高度的圖像數量等）。

我應該使用哪些CSS，以便每行預期的圖像數量？

來源

2014-12-05 Kaizer Sozay

定義高度div和應用最大高度爲圖片：

.row > div{ 
    width: 200px;/*example only*/ 
    height: 300px;/*example only*/ 
} 
.row > div img{ 
    max-height: 100%; 
}

來源

2014-12-05 21:53:19

我不明白 - 我用引導這樣的佈局將響應。如果我爲div設置了一個高度，它會不會干擾bootstrap？ – 2014-12-05 21:55:16

因此，您可以爲該div設置高度，並使用max-height將生成相同的行圖像...嘗試一次！ – 2014-12-05 21:56:36

是的 - 現在好多了。但我仍然不完全理解這個概念。我如何知道爲寬度和高度設置了什麼值？你用200px，300px。我如何決定？ – 2014-12-05 21:59:50

如何對齊不同高度的圖像行？

回答

相關問題