如何实现文本挤压图片并填充剩余屏幕且内容无溢出？

问题分析 #

当前布局里，图片被设为height:100%且容器固定height:100vh，导致文本没有足够空间容纳而溢出。要实现文本挤压图片、所有内容自适应容器的效果，用Flexbox就能轻松解决。

修改后的完整代码 #

HTML（结构无需变动）

<div class="container">
  <div class="box">
    <img src="https://placehold.co/600x400" class="image" />
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>
</div>

CSS

body, p {
  margin: 0;
}

.container {
  min-height: 100vh; /* 容器至少占满视口，文本过多时自动撑开 */
  background: skyblue;
  display: flex;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column; /* 垂直排列图片与文本 */
}

.image {
  flex-grow: 1; /* 图片占用文本之外的所有剩余空间 */
  min-height: 0; /* 允许图片被文本挤压缩小 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形，可选改用contain */
  width: 100%; /* 图片宽度填满容器 */
}

效果说明 #

• 窗口高度充足时：图片会拉伸占据视口剩余空间，文本在下方显示，蓝色容器始终覆盖整个视口区域。
• 窗口高度缩小时：文本会挤压图片空间，图片自动缩小，所有内容都能完整容纳在蓝色容器内，不会出现溢出。
• 文本高度超过视口时：蓝色容器会自动被撑开，保证所有内容完整显示，不会被裁剪。

核心修改逻辑 #

1. 容器高度改为min-height:100vh：打破固定高度限制，文本过多时容器自动扩展，同时保证至少占满视口。
2. 将box设为垂直Flex容器：让图片和文本按垂直方向分配空间，文本占据自身高度后，剩余空间全给图片。
3. 图片添加flex-grow:1：确保图片能利用剩余空间，min-height:0解除Flex容器内元素的最小高度限制，允许图片被挤压缩小，object-fit则避免图片变形。

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