【发布时间】：2018-01-04 21:23:36
【问题描述】：
我正在使用 Bootstrap 网格系统创建一个包含 3 行的图片库，每行包含 3 张图片。所有的图像都有不同的大小。我想要做的是使所有图像大小相同。 我尝试在我的 CSS 中使用 max-height 或 max-width，但它并没有帮助使所有图像（缩略图）大小相似。 我应该只是获取缩略图类的装备还是有其他解决方案？
body {
padding-top: 70px;}
.row .flex {
display: inline-flex;
width: 100%;}
img {
width:100%;
min-height:100px;}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/eKTUtA74uN0" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/x-tbVqkfQCU" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/cjpGSEkXfwM" alt="">
</div>
</div>
<div class="row match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/63JKK67yGUE" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/YP6lDrlxWYQ" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/NqE8Ral8eCE" alt="">
</div>
</div>
<div class="row flex match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/6oUsyeYXgTg" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/WF2lvywxdMM" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/2FdIvx7sy3U" alt="">
</div>
</div>
</div>
</div>【问题讨论】：
-
如果所有的图片都是不同的尺寸，那么如果你让它们的高度和宽度都一样，它们就会变形。您需要决定是否希望它们都具有相同的宽度或相同的高度。
-
正如我所见，有 3 幅照片 y las 行
-
您知道使用 flex 的 boostrap4 吗？ v4-alpha.getbootstrap.com/utilities/flexbox 因为您正在尝试使用 flex :)
-
@ZimSystem 谢谢你提供的信息，我完全忘记了。
-
@GCyrillus，谢谢，我会查一下
标签： html css twitter-bootstrap image bootstrap-grid