Flexbox布局问题：尝试让子项保持16:9宽高比未达预期，求排查

嗨，我来帮你梳理下为什么16:9的宽高比没生效～你的代码里有两个关键问题导致效果不达预期：

问题1：Flex子项宽度未被约束 #

你的.container是Flex容器，但子元素.item没有设置flex属性，默认情况下.item的宽度会根据内部内容自适应，这就导致内部用来实现宽高比的div（带padding-bottom: 56.25%的那个）没有稳定的宽度基准，自然没法算出正确的高度。

问题2：图片撑开了容器 #

你的img是默认的行内块元素，它会占据自身的空间，直接撑开父容器，导致padding-bottom设置的16:9比例被覆盖——因为父容器的高度会被图片的高度撑开，而不是只由padding来决定。

修正后的代码 #

CSS部分 #

html, body { margin:0; }
.container { 
  display: flex; 
  flex-direction:row; 
}
/* 让每个.item平分容器宽度 */
.item {
  flex: 1;
  margin: 0 5px; /* 可选：加个间距更美观 */
}
/* 宽高比容器：相对定位，padding-bottom实现16:9 */
.item div { 
  width: 100%; 
  padding-bottom: 56.25%; 
  background: gold;
  position: relative; /* 为图片绝对定位做基准 */
  overflow: hidden; /* 裁剪超出容器的图片部分 */
}
/* 图片绝对定位，填充整个容器 */
img { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填充容器 */
}

HTML部分（无需修改，保持原结构即可） #

<div class="container">
  <div class="item">
    <div>
      <img src="https://placeimg.com/1000/1000/any/grayscale">
    </div>
  </div>
  <div class="item">
    <div>
      <img src="https://placeimg.com/1000/1000/any/grayscale">
    </div>
  </div>
</div>

核心改动说明 #

• 给.item加flex:1：让两个子项平分Flex容器的可用宽度，确保宽高比容器有稳定的宽度基准。
• 宽高比容器设置position:relative，图片设置position:absolute：把图片从文档流中剥离，避免它撑开父容器，让padding-bottom:56.25%（即1/1.6≈0.5625，对应16:9）完全控制容器的高度。
• overflow:hidden+object-fit:cover：保证图片填满容器的同时，不会变形，超出部分会被裁剪。

内容的提问来源于stack exchange，提问作者user779681