如何构建固定高度figure，让img与figcaption自适应填充空间

需求说明 #

需要实现垂直堆叠<img>与<figcaption>的<figure>元素，满足以下要求：

• <figure>高度固定为100vh
• <figcaption>保持自然高度（随文本换行、字号变化自动调整）
• <img>自适应填充<figure>的剩余空间

原有Flex布局方案在图片尺寸小于视口时可正常工作，但遇到大尺寸图片（如2000x3000）时失效，无法正确限制图片高度并挤压<figcaption>。

原有问题代码 #

HTML

<figure>
    <img src="https://via.placeholder.com/2000x3000/eee?text=2:3"/>
    <figcaption>Figcaption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption</figcaption>
</figure>

CSS

figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

img {
    object-fit: contain;
    flex-shrink: 1;
}

可行解决方案 #

方案一：Flex布局修复（兼容旧版WebKit，适合ePub场景） #

通过强制图片基于Flex分配的空间计算高度，解决大尺寸图片撑破布局的问题：

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

img {
  flex: 1 1 auto; /* 占据剩余空间，必要时自动收缩 */
  height: 0; /* 核心：强制忽略图片自身内在高度，基于Flex空间计算高度 */
  object-fit: contain; /* 保持图片比例，避免拉伸 */
}

figcaption {
  flex-shrink: 0; /* 防止figcaption被图片挤压 */
}

关键原理

• height: 0：在垂直Flex布局中，元素默认优先使用自身内在高度，设置height: 0可强制图片基于Flex分配的剩余空间计算高度，彻底避免大尺寸图片撑破容器。
• flex: 1 1 auto：让图片自动填充<figure>中除<figcaption>外的所有剩余空间，同时在空间不足时自动收缩。
• flex-shrink: 0：确保<figcaption>始终保持自然高度，不会被图片挤压变形。

方案二：Grid布局（现代浏览器优先） #

如果不需要兼容过旧的WebKit，Grid布局实现更直观：

figure {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto; /* 第一行占剩余空间，第二行自适应 */
  height: 100vh;
}

img {
  object-fit: contain;
  max-height: 100%; /* 限制图片不超出网格行高度 */
}

原理说明

Grid将<figure>划分为两行：第一行用1fr占据所有剩余空间，第二行用auto自适应<figcaption>的高度。图片放在第一行，会自动填充空间，大尺寸图片通过object-fit: contain保持比例显示。

旧版WebKit兼容补充 #

针对ePub场景的旧版WebKit：

• 若object-fit不被支持，可替换为max-width: 100%; max-height: 100%;（但可能导致图片拉伸，需根据实际需求调整）。
• Flex布局的height: 0技巧在旧WebKit中可正常生效，是更可靠的兼容方案。

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