【发布时间】：2016-03-17 10:43:29
【问题描述】：
我想调整图像的大小以覆盖整个 div。如果你们可以在 CSS 中提出任何建议而不是使用 javascript，那将非常有帮助。
这是我现在拥有的样本
.third{
width:30%;
float:left;
margin:8px;
}
.second{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
img{
width:100%;
object-fit:fill;
}
<div class="first">
<div class="second">
<div class="third">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
<div class="third">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
<div class="third">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
</div>
</div>
这里是codepen的链接了解更多详情：http://codepen.io/gruler05/pen/vGyObo
第一个、第三个和第四个图像比其他图像小。谁能告诉我如何将这些图像拉伸到其容器 div 的大小，以使所有图像看起来都具有相同的大小。先感谢您。 P.S：我尝试了对象拟合，但没有奏效。
【问题讨论】：
-
您可以将图像设置为 div 的背景图像并使用 background-size:cover。
-
我想过，但有没有其他方法可以在不使用背景图像的情况下做到这一点？
-
你需要图片本身来设置高度/宽度吗？
background-image不需要，图片需要保持纵横比吗？ -
@LGSon 如果某些图像失去了它的纵横比，那很好。因为我知道 15 张图片中只有 3-4 张的高度会比其他图片略低。
-
我发布了一个更新，给你一些选择。
标签： html angularjs css flexbox