Question

我使用bootstrap为我的CSS。我有一个把手圈，我并排放置了许多图像：

<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％; 最大高度：400px; }

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

我应该应用什么CSS，以便每行都有预期的图像数量？

Answer 1

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

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

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

1 个答案: