css - 如何对齐不同高度的图像行？

Question

我正在为我的 CSS 使用 Bootstrap。 我有一个 Handlebars 环，我在其中并排放置许多图像:

<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:

图片{ 最大宽度:100%； 最大高度:400px； }

但是现在有些行具有预期的图像数量，其他行的图像数量较少(取决于相同高度的图像数量等)。

我应该应用什么 CSS 才能使每行上的图像数量达到预期？

Answer 1

定义 div 的高度并为图像应用 max-height:

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