Flexbox 16:9张图片
Flexbox 16:9张图片
提问于 2018-06-20 02:39:46
我正在使用Flexbox，并有简单的布局
.container {
display:flex;
flex-direction:row;
}
.image-wrapper {
flex:1;
position: relative;
padding-bottom: 56.2%;
}
.image-wrapper img {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
}<div class="container">
<!-- Image start -->
<div class="image-wrapper">
<img src="https://dummyimage.com/1500x1000/000/fff" alt="" />
</div>
<div class="image-wrapper">
<img src="https://dummyimage.com/1500x1000/000/fff" alt="" />
</div>
<div class="image-wrapper">
<img src="https://dummyimage.com/1500x1000/000/fff" alt="" />
</div>
<!-- Image end -->
</div>
我正在努力确保图像都是16:9的宽高比。这在没有flexbox的情况下可以工作，但是一旦我让div变得灵活，它就不再工作了。
我做错了什么？
回答 1
Stack Overflow用户
发布于 2018-06-20 03:45:38
flex容器的初始设置是flex-wrap: nowrap。这意味着flex项无论如何都将被限制在一行中。添加flex-wrap: wrap。
.container {
display:flex;
flex-wrap: wrap;
}另外，请注意下面的帖子，它现在可能已经过时了，但在某些浏览器中可能不会。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50935002
复制相关文章
相似问题