如何让嵌套图片占flexbox父元素100%高度（无需逐层设高）

问题描述 #

我的HTML结构中图片嵌套在多层div内：

<div class="left">
  <div>
    <div>
      <div>
        <div>
          <img src="https://via.placeholder.com/500X400" />
        </div>
      </div>
    </div>
  </div>
</div>

我希望这张图片能像作为直接子元素时一样，占满父元素.left的100%高度，但无法给每一层嵌套的div都设置100%高度，请问最简单的实现方法是什么？

解决方案 #

方法1：使用CSS Grid（推荐，不脱离文档流） #

仅需给最外层的.left容器设置display: grid，Grid布局会自动让所有嵌套的子元素拉伸填充容器空间，再给图片设置宽高100%即可：

.left {
  display: grid;
  height: 100vh; /* 这里替换为你需要的父元素高度，比如固定值400px */
}

.left img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选，保持图片比例并覆盖容器，也可用contain保持完整显示 */
}

方法2：绝对定位（快速实现，图片脱离文档流） #

给.left设置相对定位，直接让图片绝对定位撑满整个容器，不受中间嵌套div影响：

.left {
  position: relative;
  height: 100vh; /* 替换为目标高度 */
  overflow: hidden; /* 可选，防止图片超出容器 */
}

.left img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选 */
}

这两种方法都不需要修改中间嵌套的div，就能实现图片占满.left高度的需求。

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