纵向flex容器中<img>标签的flex:1属性适配问题

直接上可行的配置和代码示例，解决你遇到的溢出、比例失调问题：

核心实现思路 #

主容器用纵向Flex布局，动态高度的子元素自动占据自身高度，图片通过flex:1获取剩余空间，再用object-fit控制图片在容器内的显示行为，既占满空间又保持比例，避免溢出。

完整代码示例 #

<!-- HTML结构 -->
<div class="main-container">
  <div class="dynamic-div">
    <!-- 动态内容区域，高度随内容自动变化 -->
    这里是动态内容，可能是多行文本或其他元素
  </div>
  <img src="your-image-url.jpg" alt="目标图片" class="flex-image">
</div>

/* CSS样式 */
.main-container {
  display: flex;
  flex-direction: column;
  height: 400px; /* 主容器固定高度，根据需求调整 */
  border: 1px solid #ddd;
  overflow: hidden; /* 强制容器内元素不超出容器边界 */
}

.dynamic-div {
  /* 无需手动设置高度，内容自动撑开 */
  padding: 10px;
  background-color: #f8f8f8;
}

.flex-image {
  flex: 1; /* 抢占主容器剩余空间 */
  width: 100%; /* 宽度填满容器 */
  object-fit: cover; /* 图片填满容器，超出部分裁剪，保持比例 */
  /* 若希望完整显示图片（可能留空白），替换为 object-fit: contain; */
}

为什么之前的方法失效？ #

• 仅加flex:1时，图片会保留自身固有宽高比，当剩余空间的高度不足以容纳图片按比例缩放后的尺寸时，图片会撑破容器。
• max-height:100%是基于主容器的整体高度计算，而非剩余空间，所以会和动态div的高度叠加导致溢出。
• object-fit是关键：它能让图片在指定的宽高容器内，按比例调整显示方式，既占满空间又不破坏比例。

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