如何在Flexbox行容器中基于高度保持图片宽高比并让两侧占位盒自适应？

没问题，这个需求完全可以实现！先帮你修正原代码里的小错误，再给出完整的实现方案：

原代码的小问题 #

• 图片的ID拼写错误：#centerIImg 应该是 #centerImg
• <img> 是自闭合标签，不需要写 </img>

完整实现代码 #

HTML部分

<!-- 给fillerRow加父容器确保高度参考，你可以根据实际场景调整 -->
<div class="container">
  <div class="fillerRow" style="flex: 80%">
    <div class="fillerBox"></div>
    <img id="centerImg" src="./img/image.png">
    <div class="fillerBox"></div>
  </div>
</div>

CSS部分

/* 先确保根元素和父容器有明确的高度参考 */
html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fillerRow { 
  display: flex; 
  flex-direction: row; 
  width: 100%; 
  flex: 1;
  /* 可选：如果需要图片垂直居中，取消下面注释；默认stretch会让图片高度占满容器 */
  /* align-items: center; */
}

.fillerBox { 
  flex: 1; 
  /* 可选：加背景色方便直观看到两侧自适应效果 */
  /* background-color: #f0f0f0; */
}

#centerImg { 
  height: 100%; 
  width: auto;
  /* 可选：防止图片过宽超出容器，加上后会优先保证宽度不溢出，同时保持比例 */
  max-width: 100%;
}

核心逻辑说明 #

1. 高度基准建立：给html、body和父容器.container设置高度，这样.fillerRow的flex:1才能占满可用高度，图片的height:100%才有明确的参照。
2. 宽高比自动保持：height:100%让图片高度跟随.fillerRow的高度变化，width:auto会自动根据图片原始宽高比计算对应宽度，完美保留比例。
3. 两侧自适应居中：.fillerBox的flex:1会让两个盒子平分.fillerRow中除了图片宽度之外的剩余空间，自然把图片推到容器正中间。
4. 溢出防护优化：加上max-width:100%可以避免图片因原始比例过宽导致横向溢出的问题，此时图片会优先保证宽度不超出容器，同时维持宽高比。

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