如何在含可变文本的div中让图片自适应父容器高度（Bootstrap4）

我来帮你搞定这个布局难题！你要的是让图片和可变文本的总高度刚好适配30vh的父容器，图片尽可能占用空间，有文本时自动缩小，无文本时直接占满——用Flexbox就能完美实现，下面分纯CSS和Bootstrap 4两种方案给你说明：

纯CSS实现方案 #

先调整你的CSS和HTML结构，核心是给父容器启用垂直方向的弹性布局：

#test {
  height: 30vh;
  width: 50%;
  display: flex; /* 开启弹性布局 */
  flex-direction: column; /* 子元素垂直排列 */
  overflow: hidden; /* 防止内容溢出父容器 */
}

img {
  flex: 1; /* 让图片优先占据剩余可用空间 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
  width: 100%; /* 确保图片宽度填满容器 */
}

对应的HTML结构（去掉多余的<br>，让结构更清晰）：

<div id="test">
  <img src="你的图片地址">
  <div>Variable amount of text</div>
</div>

原理说明 #

• 父容器设为flex-direction: column后，图片和文本会垂直排列
• 图片的flex:1属性让它自动占据父容器中除文本外的所有剩余空间：没有文本时，图片直接占满30vh；有文本时，图片高度自动减去文本的高度，保证总高度不超过父容器
• 如果文本过长导致溢出，可以给文本容器加overflow-y: auto，让文本可以滚动

Bootstrap 4便捷实现方案 #

Bootstrap 4内置了全套Flexbox工具类，不用写自定义CSS就能快速实现需求：

<div id="test" class="d-flex flex-column overflow-hidden" style="height:30vh; width:50%;">
  <img src="你的图片地址" class="flex-fill" style="object-fit: cover; width:100%;">
  <div>Variable amount of text</div>
</div>

关键工具类说明 #

• d-flex：给父容器启用弹性布局
• flex-column：设置子元素垂直排列
• overflow-hidden：避免内容溢出父容器
• flex-fill：让图片占据剩余可用空间（等价于CSS的flex:1）

如果需要文本过长时支持滚动，给文本容器加overflow-y-auto类即可：

<div id="test" class="d-flex flex-column overflow-hidden" style="height:30vh; width:50%;">
  <img src="你的图片地址" class="flex-fill" style="object-fit: cover; width:100%;">
  <div class="overflow-y-auto">这里可以放很长很长的文本内容，超出后会自动出现滚动条...</div>
</div>

这样不管文本是0行、1行还是多行，图片都会自动调整高度，完美适配父容器的30vh高度～

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