如何让图片适配容器高度且不撑大父容器？

问题描述 #

当前布局里，蓝色.parent容器的高度由中间红色.wrapper的文本内容决定。但第一个.wrapper内的图片移除max-height后，会按原始尺寸显示，直接撑大自身容器，导致整个.parent的高度被拉高。需要通过纯CSS实现：图片自适应绿色.image-div的可用高度，保持宽高比（宽度可溢出），且不影响.parent的整体高度。

关键修改说明 #

1. 给.wrapper添加min-height: 0：解除flex子元素在column方向的最小高度限制，确保容器高度不会被内部内容撑破，始终跟随.parent的高度（由最高的文本容器决定）。
2. 移除.image的max-height，保留height: 100%并添加width: auto：让图片高度填满.image-div，宽度自动按原比例缩放，超出部分被.wrapper的overflow: hidden截断。

修改后的完整代码 #

CSS

.parent {
  /* This has a dynamic height */
  display: flex;
  gap: 1em;
  padding: 1em;
  background-color: lightblue;
}

.wrapper {
  width: 150px;
  /* This is a dynamic fixed width */
  display: flex;
  justify-content: center;
  padding: 1em;
  flex-direction: column;
  overflow: hidden;
  background-color: lightcoral;
  min-height: 0; /* 新增：允许容器高度被限制 */
}

.image-div {
  height: 100%;
  display: flex;
  padding: 10px;
  gap: 5px;
  overflow: hidden;
  background-color: lightgreen;
}

.image {
  height: 100%;
  width: auto; /* 新增：按比例自动调整宽度 */
  /* 移除max-height */
}

HTML

<div class='parent'>
  <div class='wrapper'>
    <div class='image-div'>
      <img class='image' src="https://picsum.photos/50/200" />
      <img class='image' src="https://picsum.photos/50/150" />
      <img class='image' src="https://picsum.photos/50/100" />
    </div>
  </div>
  <div class='wrapper'>
    <span> This </span>
    <span> text </span>
    <span> should </span>
    <span> dictate </span>
    <span> dictate </span>
    <span> max </span>
    <span> height </span>
  </div>
  <div class='wrapper'>
    <span> Small text </span>
    <span> doesn't matter </span>
  </div>
</div>

效果说明 #

修改后，.parent的高度仍由中间文本容器决定，第一个.wrapper的高度与其他容器保持一致，图片会填满绿色.image-div的高度，宽度按原比例自动缩放，超出红色.wrapper的部分会被隐藏，完全符合需求。

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