Question

我正在使用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的情况下有效，但是一旦我使divs flex便不再起作用。

我在做什么错了？

Answer 1

弹性容器的初始设置为flex-wrap: nowrap。这意味着弹性项目无论如何都将限制在一行内。添加flex-wrap: wrap。

.container {
  display:flex;
  flex-wrap: wrap;
}

此外，请注意以下帖子，该帖子到现在可能已过时，但在某些浏览器中可能没有。

Why doesn't percentage padding / margin work on flex items in Firefox?

jsFiddle demo

Flexbox 16：9图片

1 个答案: