本文详解在 flex 布局中使图片严格占满父容器高度的 css 实现方案，重点解决因父级高度未显式定义导致 `height: 100%` 失效的问题，并提供可落地的响应式代码示例与关键注意事项。
在现代 Web 布局中，常需将多张尺寸各异的图片并排展示，并统一拉伸至容器的全部可用高度（而非仅按宽高比缩放）。但实践中，即使为 设置了 height: 100%; width: 100%; object-fit: cover;，图片仍可能无法填满预期高度——根本原因在于：CSS 中的百分比高度（height: 100%）是相对于其包含块（containing block）计算的；若父元素未设置明确的高度（如 px、vh 或通过 Flex 布局继承的高度），该百分比将失效，回退为 auto。
在你的代码中，.image-caption-wrapper 和 .image 均设置了 height: 100%，但其祖先 .container 缺少显式高度定义，而 .container 本身是 Flex 容器，默认行为是“内容自适应高度”（即 height: auto）。因此，子元素的 100% 实际等于 0，导致图片高度塌陷。
✅ 正确解法：为 .container 显式赋予高度基准。有以下三种推荐方式，按适用场景排序：
✅ 方案一：使用 min-height + Flex 主轴对齐（最实用）
适用于容器高度由内容决定、但需确保图片至少撑满可视区域或最小高度：
.container {
display: flex;
flex-direction: row;
width: 100%;
column-gap: 10px;
margin: 10px 0;
min-height: 200px; /* 设定最小高度基准 */
}
.image-caption-wrapper {
flex: 1; /* 替代 width: 50%，更健壮 */
height: 100%; /* 现在有效：父 container 有 min-height */
display: flex;
flex-direction: column;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
flex-shrink: 0; /* 防止图片被压缩 */
}
.image-caption-wrapper p {
margin: 4px 0 0;
font-size: 0.875rem;
text-align: center;
}✅ 方案二：让 .container 继承父容器高度（需父级有高度）
若 .container 的父
/* 在外层 div 上添加 */
div > .container {
height: 100%; /* 依赖父 div 有明确高度 */
}
/* 同时确保父 div 高度不为 auto */
div {
min-height: 300px; /* 或 height: 100vh; */
}✅ 方案三：利用 Flex 布局的 align-items: stretch（零额外高度声明）
当 .container 是 Flex 子项时，可借助 Flex 的默认拉伸行为：
<!-- 外层容器设为 flex --> <div style="display: flex; flex-direction: column; min-height: 100vh;"> <p>...</p> <div class="container"></div> <p>...</p> </div>
此时 .container 会自动拉伸以填充剩余空间，其 height: 100% 即可生效。
⚠️ 关键注意事项：
- ❌ 避免仅依赖 width: 50%：使用 flex: 1 更可靠，能自动处理 column-gap 和边界；
- ❌ 不要遗漏 flex-shrink: 0：否则图片可能被 Flex 压缩变形；
- ✅ object-fit: cover 是保持比例填充的核心，配合 width/height: 100% 才能实现“裁剪式全高覆盖”；
- ✅ 若需响应式，可结合 @media 动态调整 .container 的 min-height，例如移动设备设为 150px；
- ? 调试技巧：在浏览器开发者工具中检查 .container 的 computed height 是否为 0，即可快速定位高度丢失根源。
综上，“让图片占满容器高度”的本质，不是给图片加样式，而是为它的高度参照系（即父容器）赋予确定的高度上下文。掌握这一原则，即可稳定实现任意复杂嵌套中的图片全高适配。
