无Flex实现：非固定高度父容器下图片垂直拉伸填充

先帮你捋清楚问题根源：你当前用inline-block布局图片时，默认的vertical-align: baseline会让图片和文本基线对齐，再加上父元素默认的line-height，就容易出现顶部留白；而且只给图片设置宽度的话，高度是自动缩放的，没法保证填满父容器高度。

下面给你两种无需Flexbox的解决方案：

方案1：调整inline-block对齐+清除行高 #

这种方法不用额外嵌套元素，直接修改现有CSS即可：

.background { 
  height: 100vh; 
  width: 100%; 
  background-color: grey; 
  position: relative; 
}
.content { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  width: 80%; 
  background-color: white; 
  line-height: 0; /* 清除父元素行高带来的留白 */
}
img { 
  display: inline-block; 
  width: 50%; /* 改成50%让两张图占满容器宽度，之前的35%会留空隙 */
  vertical-align: top; /* 让图片顶部对齐，消除基线留白 */
  height: 100%; /* 强制图片高度填满父容器 */
  object-fit: cover; /* 可选：若图片比例与容器不符，保持裁剪不拉伸 */
}

核心点是line-height: 0消除父容器行高的影响，vertical-align: top修正图片对齐方式，再通过height: 100%让图片填满容器高度。如果不想图片变形，object-fit: cover能帮你保持图片比例同时填满容器。

方案2：使用Table布局（解决table-cell对img无效的问题） #

你之前直接给img设display: table-cell没用，是因为table-cell必须放在display: table或display: table-row的容器里。咱们可以给每个图片套一层容器，用table布局实现：

修改后的HTML： #

<div class="background">
  <div class="wrapper">
    <div class="content">
      <div class="img-container">
        <img src="./nat-8.jpg" alt="" />
      </div>
      <div class="img-container">
        <img src="./nat-9.jpg" alt="" />
      </div>
    </div>
  </div>
</div>

对应的CSS： #

.background { 
  height: 100vh; 
  width: 100%; 
  background-color: grey; 
  position: relative; 
}
.content { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  width: 80%; 
  background-color: white; 
  display: table; /* 将content设为table容器 */
  table-layout: fixed; /* 让两个单元格自动均分宽度 */
}
.img-container {
  display: table-cell; /* 每个图片容器作为table-cell */
  vertical-align: middle; /* 可选：让图片在单元格内垂直居中 */
}
img { 
  width: 100%; /* 图片填满单元格宽度 */
  height: 100%; /* 图片填满单元格高度 */
  object-fit: cover; /* 可选：保持图片比例 */
}

这种方法利用table布局的特性，让两个图片容器自动保持高度一致、宽度均分，图片能完全填满对应的单元格，而且不需要给父容器设置固定高度。

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