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

Question

我正在为我的CSS使用bootstrap。我有一个把手环，在其中并排放置许多图像：

<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％；最大高度：400像素；}

但是现在，某些行具有预期的图像数量，而另一些将具有较少的数量（取决于相同高度的图像数量等）。

我应该应用哪种CSS，以便每行上都有期望的图像数量？

Answer 1

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

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