本文详解如何利用 CSS Flexbox 实现图片容器高度自动匹配文本容器高度，解决 height: 100% 失效问题，并提供可靠、语义清晰的响应式方案。
本文详解如何利用 css flexbox 实现图片容器高度自动匹配文本容器高度，解决 `height: 100%` 失效问题，并提供可靠、语义清晰的响应式方案。
在 Flexbox 布局中，让 .child-img 的高度严格跟随 .child-txt（即由文本内容决定的高度），关键在于父容器必须具有明确的高度约束——而 height: auto 并不能为子元素的百分比高度提供计算基准。CSS 规范明确规定：height: 100% 只有在父元素拥有确定的高度值（如 px、rem、或由内容撑开但被 Flex 主轴约束后的有效高度）时才生效。你原代码中 .parent { height: auto } 实际上使 .child-img { height: 100% } 退化为 height: auto，导致图片按自身固有尺寸渲染。
✅ 正确解法：利用 Flexbox 的默认行为 + align-items: stretch（默认值）
Flex 容器中的子项（flex items）在未显式设置 align-items 时，默认拉伸（stretch）以填满交叉轴（cross axis）。当主轴为水平（flex-direction: row）时，交叉轴即垂直方向——这意味着两个子 div 会自动等高，高度由内容最高的那个子项决定。
因此，无需手动设置 height: 100%，只需确保：
- .parent 是 display: flex
- .child-txt 内容（如
）字体变化能自然撑高自身
- .child-img 内图片使用 height: 100% 或 object-fit: cover/contain 配合 width: 100%
以下是推荐实现：
<div class="parent">
<div class="child-img">
<img src="image1.jpg" alt="Image 1"><img src="image2.jpg" alt="Image 2">
</div>
<div class="child-txt">
<p>Title Text Here</p>
</div>
</div>
.parent {
display: flex; /* 启用 Flex 布局 */
gap: 1rem; /* 可选：设置子项间距 */
/* align-items: stretch; ← 默认值，可省略 */
}
.child-img,
.child-txt {
/* 两者将自动等高；无需 height: 100% */
}
.child-img img {
display: block;
width: 100%;
height: 100%; /* 此时 100% 有效，因 .child-img 已被 flex 拉伸为确定高度 */
object-fit: cover; /* 防止变形，按需选用 */
}
.child-txt p {
margin: 0;
font-size: 2.5rem; /* 修改此值，整体高度实时响应 */
}
⚠️ 注意事项：
- 避免冗余 height 设置：.parent { height: auto } 和 .child-img { height: 100% } 在 flex 场景下不仅无效，还可能干扰默认拉伸行为；
- 图片需设 display: block：防止内联元素默认的基线对齐导致底部空白；
- 响应式增强：若需在小屏转为垂直布局，添加 @media (max-width: 768px) { .parent { flex-direction: column; } } 即可；
-
语义与可访问性：确保
包含有意义的 alt 属性，且文本容器结构合理（如用
或 替代无意义 div 更佳）。
总结：Flexbox 的 stretch 对齐是解决“同排元素等高”问题最简洁、最符合规范的方式。放弃对百分比高度的机械依赖，转而信任 Flex 的内在布局逻辑，既能提升代码健壮性，也更利于维护与扩展。
