如何根据包含文本的同级元素高度自适应调整图片尺寸？

直接使用Flex布局的默认拉伸特性实现同级元素等高，搭配object-fit属性保证图片宽高比不失真，全现代浏览器兼容，代码简洁可直接复用。 #

完整代码示例 #

HTML结构 #

<div class="container">
  <!-- 文本侧：高度由自身内容自然撑开 -->
  <div class="text-section">
    <h3>标题示例</h3>
    <p>这里可以放任意长度的文本内容，不管是短文本还是长文本，容器高度都会随内容自动适配，不需要手动写固定高度值。</p>
    <p>多行文本、段落、列表等任意内容都可以放在这个容器里，最终撑开的高度会作为图片侧的高度基准。</p>
  </div>
  <!-- 图片侧：高度自动匹配文本侧 -->
  <div class="img-section">
    <img src="your-image.jpg" alt="展示图片">
  </div>
</div>

CSS样式 #

.container {
  display: flex;
  /* 两个区块的间距，可根据需求调整 */
  gap: 24px;
  /* 核心属性：flex子元素默认沿交叉轴拉伸，自动实现等高，显式声明增强可读性 */
  align-items: stretch;
}

.text-section {
  /* 文本区块占剩余宽度，可根据布局需求改成固定宽度，比如width: 60% */
  flex: 1;
}

.img-section {
  /* 图片区块宽度可按需调整，比如设置flex: 0 0 40% 表示固定占父容器40%宽度 */
  flex: 0 0 auto;
}

.img-section img {
  /* 图片高度撑满父容器，和文本区块高度完全一致 */
  height: 100%;
  /* 宽度自动计算，保留原始宽高比 */
  width: auto;
  /* 清除行内元素默认底部间隙 */
  display: block;
  /* 核心属性：保证图片不拉伸变形，contain表示完整显示图片（留空边），cover表示填满容器（裁边缘） */
  object-fit: contain;
}

关键说明 #

• 不需要写任何JavaScript监听高度变化，纯CSS原生能力实现，性能更好
• 文本侧高度完全由内容决定，不管是500px还是其他任意高度，图片侧都会自动同步高度
• 如果需要图片填满整个图片容器、允许裁切边缘多余部分，只需要把object-fit: contain改成object-fit: cover即可，两种取值都不会造成图片拉伸失真
• 如果布局不需要额外嵌套，也可以省略.img-section这层div，直接把<img>作为flex容器的直接子元素，给img加上对应属性即可

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