如何让.image-container高度随.content-container内容动态自适应？

问题说明 #

当前场景下，.content-container本应根据自身内容占据所需高度，但添加图片后，.main-container被图片拉高，反而导致内容容器被强制拉伸。我们需要实现图片容器高度匹配内容容器高度，让内容容器的高度完全由自身内容决定。

实现代码 #

修改后的CSS

.main-container {
  width: 100%;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* 确保两个子容器高度一致 */
}

.image-container {
  flex: 0 0 50%;
  background-color: aqua;
  height: 100%; /* 继承父容器高度，父容器高度由内容容器主导 */
  position: relative; /* 为内部图片的绝对定位提供参考 */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填满容器并裁剪超出部分 */
}

.content-container {
  flex: 0 0 50%;
  background-color: orange;
  /* 高度由自身内容自动撑开，无需额外设置 */
}

原HTML（无需修改）

<div class="main-container">
  <div class="image-container">
    <img src="https://images.unsplash.com/photo-1464146072230-91cabc968266?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
  </div>
  <div class="content-container">
    <h1>test1</h1>
    <h1>test1</h1>
    <h1>test1</h1>
    <h1>test1</h1>
    <h1>test1</h1>
    <h1>test1</h1>
    <h1>test1</h1>
    <h1>test1</h1>
    <h1>test1</h1>
  </div>
</div>

核心原理 #

1. 给.image-container设置相对定位，内部图片用绝对定位，彻底避免图片撑开容器高度
2. object-fit: cover保证图片在自适应高度的容器内按比例显示，不会变形，超出容器的部分自动裁剪（如果需要完整显示图片可换成object-fit: contain）
3. main-container的align-items: stretch属性会让两个子容器高度保持一致，而内容容器的高度由自身内容决定，因此图片容器会自动匹配这个高度

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