使用 height: 100vh 配合 width: auto 可使背景图垂直填满视口且不拉伸变形，避免 % 高度导致的不可预测行为。
使用 `height: 100vh` 配合 `width: auto` 可使背景图垂直填满视口且不拉伸变形，避免 `%` 高度导致的不可预测行为。
在网页开发中，让背景图片“刚好填满屏幕高度”却常陷入两难：用 background-size: cover 会导致宽度被裁剪（尤其竖构图图片），而仅设 min-height: 100% 又因百分比高度依赖父容器高度，在无明确高度上下文时往往失效——这是因为 % 单位在 height 上需父元素有确定高度，而 body/html 默认高度由内容决定，视口高度（viewport height）并非其固有属性。
更可靠的方式是采用视口单位（Viewport Units）：
- 100vh = 当前浏览器窗口可见区域的高度（100% viewport height）
- 100vw = 当前浏览器窗口可见区域的宽度（100% viewport width）
✅ 推荐方案（适用于以高度为优先约束、保持原始宽高比的场景）：
.your-background-element {
background-image: url('your-image.jpg');
background-repeat: no-repeat;
background-position: center top; /* 可选：确保顶部对齐 */
width: auto;
height: 100vh;
background-size: contain; /* 或 auto —— 保持原比例缩放 */
}⚠️ 注意事项：
- background-size: contain 确保整张图完整可见（可能留白），而 auto 或 100% 则按 height: 100vh 自动等比缩放；
- 若需完全铺满且允许裁剪（如全屏横幅），应改用 background-size: cover; height: 100vh; 并配合 background-position: center;；
- 避免混用 min-height: 100% 和 max-width: 100%——它们作用于元素自身尺寸，而非背景图渲染逻辑，与 background-size 属不同控制维度；
- 移动端需额外添加 以确保 vh 单位准确响应视口。
总结：当目标是「背景图高度严格等于屏幕可视区，同时不破坏比例」时，height: 100vh; width: auto; background-size: contain; 是语义清晰、兼容性好（IE9+）、无需 JavaScript 的最佳实践。
