Html Flexbox 16:9图像

我使用Flexbox，布局简单

.集装箱{ 显示器：flex； 弯曲方向：行； } .图像包装器{ 弹性：1； 位置：相对位置； 垫底：56.2%； } .图像包装器img{ 位置：绝对位置； 对象匹配：覆盖； 宽度：100%； 身高：100%； }

---

flex容器的初始设置为。这意味着无论发生什么情况，弹性项目都将仅限于一行。添加柔性包裹：包裹

另外，请注意下面的帖子，它可能已经过时了，但在某些浏览器中可能还没有

---

为什么图像上有100%的高度？代码段在没有它的情况下工作得很好。但是我想将它们保留在一行中，而不是一列中。哦，你在问题中说它在没有flexbox的情况下工作，所以在我看来，你想要与块布局相同的行为。只需删除flex wrap:nowrap。我已经添加的flex:10100%应该足以让它工作，至少在Chrome中是这样。请参阅我为其他浏览器发布的链接。对不起，原来的帖子不是很清楚。我的意思是16:9的纵横比在没有flexbox的情况下可以工作，但是当我把它们放在flexbox布局中，一行3个时，纵横比就中断了

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