在 Flex 容器中设置 height: 100% 的图片常因默认 vertical-align: baseline 导致底部留白，实际高度小于父容器；添加 vertical-align: top 可消除行内元素基线对齐带来的间隙，使 height: 100% 真正生效。
在 flex 容器中设置 `height: 100%` 的图片常因默认 `vertical-align: baseline` 导致底部留白，实际高度小于父容器；添加 `vertical-align: top` 可消除行内元素基线对齐带来的间隙，使 `height: 100%` 真正生效。
当使用 Flex 布局构建响应式图文区块（如 .features）时，开发者常期望 .features-img-container 及其内部 元素严格撑满父级高度。但即使为容器和图片均设置了 height: 100%，仍可能出现图片高度略小于容器（例如 185px vs 189px），导致视觉上未完全覆盖或出现细微空白。
根本原因在于： 是原生行内替换元素（inline replaced element），其默认 vertical-align 值为 baseline。该属性会使图片底部与父容器文本基线对齐，而基线以下会预留约 4px 的「字母下降区」（descender space），即使无文字存在，该行为依然生效——这正是高度差的来源。
✅ 正确解法是显式重置对齐方式：
.features-img-container img {
height: 100%;
object-fit: cover;
vertical-align: top; /* 关键修复：消除基线对齐产生的间隙 */
}
⚠️ 注意事项：
- vertical-align 仅对 display: inline 或 inline-block 元素生效（
默认即为 inline）；
- 若将图片设为 display: block，同样可规避该问题，但需额外处理布局流（如清除浮动影响），vertical-align: top 更轻量且语义清晰；
- object-fit: cover 需配合明确宽高才生效，确保父容器（.features-img-container）本身具有可计算的高度（如 Flex 子项需依赖 Flex 容器主轴尺寸，此处 .features 未设 height，故实际高度由内容撑开；若需等高布局，建议为 .features 添加 min-height: 100vh 或明确 height）；
- 移除内联 width="100%" height="100%" 属性（HTML 属性会干扰 CSS 控制），统一由 CSS 管理尺寸。
此外，为保障 Flex 子项在主轴方向（此处为水平）合理分配空间，建议为 .features-content 和 .features-img-container 显式设置 flex: 1 或具体比例（如 flex: 0 0 60% / flex: 0 0 40%），避免因内容长度差异导致宽度失衡。
综上，vertical-align: top 是解决此类「100% 高度不生效」问题最直接、兼容性好（IE8+）且符合规范的方案，它从渲染机制层面消除了行内元素固有的对齐副作用，让 CSS 高度声明真正落地。
