父容器高度超限时子元素aspect-ratio无法保持的解决方法

问题根源 #

当前代码存在两个核心问题：

• Flex布局默认align-items: stretch，会强制子元素高度匹配父容器，直接覆盖aspect-ratio的比例约束
• 子元素仅限制了max-width: 100%，未设置max-height: 100%，导致父容器高度大幅增加时，子元素高度失控
• 之前添加align-items: center后子元素消失，是因为子元素无固有内容，height: auto结合aspect-ratio在无明确宽度的情况下无法计算出有效高度

解决方案 #

通过以下CSS调整，确保子元素无论父容器尺寸如何变化，都严格保持16:9比例且居中显示：

#parent {
  height: 90px;
  width: 160px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center; /* 启用垂直居中，不再拉伸子元素 */
}
#child {
  max-width: 100%;
  max-height: 100%; /* 新增：限制子元素高度不超过父容器 */
  aspect-ratio: 16 / 9;
  background-color: yellow;
  width: 100%; /* 让子元素优先利用父容器宽度空间，按比例计算高度 */
}

#buttons {
  position: fixed;
  left: 1em;
  top: 1em;
}

修改说明 #

1. 父容器：添加align-items: center，彻底避免子元素被垂直拉伸，同时为子元素提供居中的布局上下文
2. 子元素：
   • 新增max-height: 100%，确保子元素高度永远不会超出父容器范围
   • 设置width: 100%，让子元素优先占满父容器的宽度，再通过aspect-ratio自动计算对应高度；若父容器高度不足，max-height: 100%会触发比例缩小，保证16:9的宽高比始终成立
   • 移除无用的object-fit: contain（该属性仅对img、video等替换元素生效，div元素无需设置）

完整可运行代码 #

<div id="parent">
  <div id="child"></div>
</div>
<div id="buttons">
  <button onclick="increaseHeight()">increase height</button>
  <button onclick="increaseWidth()">increase width</button>
</div>

<script>
var height = 90;
var width = 160;

function increaseHeight() {
  height += 100;
  document.getElementById('parent').style.height = height + 'px';
}

function increaseWidth() {
  width += 100;
  document.getElementById('parent').style.width = width + 'px';
}
</script>

<style>
#parent {
  height: 90px;
  width: 160px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
#child {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  background-color: yellow;
  width: 100%;
}

#buttons {
  position: fixed;
  left: 1em;
  top: 1em;
}
</style>

效果验证 #

• 点击「increase width」：子元素随父容器宽度增大，按16:9比例同步增高，始终填满父容器宽度且不超出高度
• 点击「increase height」：子元素高度最多等于父容器高度，宽度按16:9比例自动缩小，保持比例且居中显示，不会消失或破坏布局

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