父容器上方存在其他元素时，如何让img适配父容器尺寸

DevOps 小满

2026-10-23

带前置内容的父容器内img无法遵循尺寸约束问题

当前遇到的问题：当父容器上方存在其他内容项时，img元素无法遵循父容器的尺寸约束。

代码实现

HTML结构

<div class="box">
  <h4>会溢出图片的随机长文本</h4>
  <div class="box2">
    <img class="img" src="" alt="海报缺失" />
  </div>
</div>

CSS样式

.box {
  border: 1px solid;
  border-radius: 3px;
  margin: 0.3rem;
  text-align: center;
  padding: 2rem 0;
  height: 300px;
}

.box2 {
  border: 1px solid;
  border-radius: 3px;
  text-align: center;
  height: 100%;
  border-color: red;
  display: inline-block;
  box-sizing: content-box;
}

.img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  box-sizing: content-box;
}

h4 {
  box-sizing: border-box;
}

问题根因

.box 设置了固定高度 300px，同时带有上下各 2rem 的内边距，加上内部 h4 元素占据的高度，实际留给 .box2 的可用高度远小于 300px。
.box2 直接设置 height: 100%，是相对于父元素 .box 的总高度计算，而非扣除 h4、上下内边距后的剩余高度，因此会超出 .box 的容器范围。
.img 设置 height: 100% 时完全依赖 .box2 的高度，在 .box2 高度计算错误的情况下，自然无法适配预期尺寸。

解决方案

方案1：使用Flex布局分配剩余空间（推荐）

将 .box 设为纵向排列的弹性容器，让 .box2 自动占据除 h4 外的所有剩余高度，修改后的样式如下：

.box {
  /* 原有样式保留，新增以下属性 */
  display: flex;
  flex-direction: column;
}

.box2 {
  /* 删除原有 height: 100%，新增以下属性 */
  flex: 1;
  box-sizing: border-box;
}

.img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  box-sizing: border-box;
}