使用 vh/vw 单位替代百分比高度，配合 width: auto 和 height: 100vh，可使背景图在保持原始宽高比的前提下完整覆盖视口高度，避免 background-size: cover 导致的横向裁剪或纯百分比导致的高度计算失效问题。
使用 `vh`/`vw` 单位替代百分比高度，配合 `width: auto` 和 `height: 100vh`，可使背景图在保持原始宽高比的前提下完整覆盖视口高度，避免 `background-size: cover` 导致的横向裁剪或纯百分比导致的高度计算失效问题。
在 Web 开发中，让背景图片“完美贴合屏幕”常被误解为必须用 background-size: cover —— 但它会强制缩放并裁剪图像以填满容器，极易丢失关键内容（如您遇到的“宽度被截掉一半”）。根本原因在于：min-height: 100% 在无明确父高度上下文时行为不可靠（% 高度依赖父元素设定高度，而 html/body 默认高度不继承视口），且 max-width: 100% 对背景图无效（它仅作用于替换元素如 ，而非 CSS 背景）。
✅ 正确解法是脱离百分比陷阱，拥抱视口单位：
- 100vh = 当前视口高度的 100%（精确、可靠、无需父级高度约束）
- width: auto + height: 100vh 组合可强制图像按原始宽高比等比缩放，确保高度撑满屏幕，宽度自动适配（可能留白左右，但内容完整可见）
示例代码（推荐用于
或直接设于 body）：
.hero-bg {
background-image: url('your-image.jpg');
background-repeat: no-repeat;
background-position: center center;
width: auto; /* 关键：保持固有比例 */
height: 100vh; /* 关键：精确占满视口高度 */
background-size: contain; /* 或使用 'auto'，效果同 contain；若需铺满且允许留白，contain 最安全 */
}
⚠️ 注意事项：
- 避免同时设置 width: 100vw 和 height: 100vh —— 这会强行拉伸破坏宽高比；
- background-size: contain 确保整图可见（适合强调完整性），cover 适合强调填充性（但接受裁剪）；
- 若需响应式增强，可搭配媒体查询对小屏微调 background-size 或 padding-top 防止文字重叠；
- 始终添加 background-position: center center，防止图像偏移。
总结：用 height: 100vh 锚定高度基准，用 width: auto 尊重图像本征比例，再辅以 background-size: contain，即可实现「全屏可见、不失真、不裁剪」的背景图呈现——这是语义清晰、兼容性好（IE9+）、且符合现代 CSS 布局逻辑的标准实践。
