使用 height: 100vh 配合 width: auto 可使背景图垂直填满视口且自动维持原始宽高比，避免 background-size: cover 导致的横向裁剪或纯百分比高度引发的布局异常。
使用 `height: 100vh` 配合 `width: auto` 可使背景图垂直填满视口且自动维持原始宽高比，避免 `background-size: cover` 导致的横向裁剪或纯百分比高度引发的布局异常。
在网页开发中，让背景图片“刚好填满屏幕高度”却常陷入两难：用 background-size: cover 虽能铺满整个容器，但会因等比缩放+居中裁剪而丢失两侧内容；而仅设 min-height: 100% 又常因父容器高度未定义或文档流影响，导致图片无法真正撑满视口——根本原因在于 % 单位在 height 上依赖父元素高度，而 html/body 默认高度并非天然等于视口。
✅ 推荐解法：脱离文档流高度依赖，直接锚定视口单位
.hero-section {
/* 关键：用视口单位确保真实填满当前屏幕高度 */
height: 100vh;
/* 宽度自适应，保持原始宽高比 */
width: auto;
/* 防止重复平铺 */
background-repeat: no-repeat;
/* 水平居中，垂直顶部对齐（可按需调整） */
background-position: center top;
/* 确保背景图按比例缩放至高度匹配，宽度自动计算 */
background-size: contain;
}
⚠️ 注意事项：
- vh（viewport height）基于浏览器可视区域高度，100vh ≈ 当前屏幕高度，不随页面滚动变化；
- 若需背景图完全覆盖且不裁剪任何区域，应改用 background-size: 100% auto 或 background-size: auto 100vh（后者更可控）；
- background-size: contain 保证整张图可见，适合强调完整性；cover 适合强调填充感，但需配合 background-position 精细控制焦点区域；
- 勿混用 min-height: 100% 与 height: 100vh，前者易受父级约束失效，后者语义明确、行为稳定。
总结：优先使用 height: 100vh + background-size: auto 100vh（或 contain）组合，既规避了 % 高度的继承陷阱，又精准控制图片在垂直方向的伸缩逻辑，是响应式背景图布局的可靠范式。
