在 Flex 容器中设置子元素 height: 100% 时常无法填满父容器，主因是默认行内级图像（<img>）存在基线对齐（baseline alignment）导致的隐式底部间隙，进而破坏高度继承链；添加 vertical-align: top 可彻底解决该问题。
在 flex 容器中设置子元素 `height: 100%` 时常无法填满父容器，主因是默认行内级图像（``）存在基线对齐（baseline alignment）导致的隐式底部间隙，进而破坏高度继承链；添加 `vertical-align: top` 可彻底解决该问题。
当使用 Flex 布局构建响应式图文区块（如 .features）时，开发者常期望 .features-img-container 及其内部 <img> 元素严格撑满父容器高度。但即使为容器设置了 height: 100%、为图片设置了 height: 100% 和 object-fit: cover，实际渲染中仍可能出现高度不一致（例如容器高 189px，图片仅 185px），根本原因在于：<img> 是原生行内级（inline）元素，其默认 vertical-align: baseline 会在元素下方保留约 4px 的空白间隙（用于容纳字母如 g、y 的下伸部分），该间隙虽不可见，却会参与行盒（line box）高度计算，导致父容器高度被“撑高”，而图片自身因基线对齐并未真正拉伸至容器顶部到底部的全部空间。
✅ 正确解法是显式重置图像的垂直对齐方式：
.features-img-container img {
height: 100%;
object-fit: cover;
vertical-align: top; /* 关键修复：消除基线间隙 */
}⚠️ 注意：vertical-align 仅对 行内级（inline）或表格单元格（table-cell） 元素生效。由于 <img> 默认为 display: inline，此属性可直接作用；若已将其设为 display: block，则 vertical-align 失效——此时应改用 display: block + margin: 0 或 Flex 布局内部居中方案，但本例中 vertical-align: top 是最轻量、兼容性最佳的修复。
此外，确保高度继承链完整也很重要：
- 父级 Flex 容器（.features）需有明确高度来源（如视口高度 height: 100vh，或由内容/祖先高度约束）；
- .features-img-container 本身必须能获取到有效高度值（height: 100% 才有意义），否则 100% 将计算为 0；
- 避免在 <img> 标签中同时声明 width="100%" 和 height="100%" 的 HTML 属性——它们会覆盖 CSS 的 height: 100% 行为，建议移除 width 和 height HTML 属性，完全交由 CSS 控制。
最终效果：容器与图片高度严格一致，object-fit: cover 按比例裁剪并填充整个区域，无空白、无错位，响应式表现稳定可靠。
