background-size: cover 是唯一可靠选择，但必须配 min-height: 100vh、background-position: center center 和 fallback 色，否则在手机端必然拉伸或留白；background-size: 100% 100% 强制拉伸变形，contain 必留白，cover 是等比缩放+裁切；height: 100% 不可靠，需用 min-height: 100vh + height: 100dvh 降级；绕开 Bootstrap 栅格干扰，避免 overflow: hidden 截断，并设 background-color fallback。
background-size: cover 是唯一可靠选择，但必须配 min-height: 100vh、background-position: center center 和 fallback 色，否则在手机端必然拉伸或留白。
为什么 background-size: 100% 100% 在手机端一定变形
它强制把图片宽高分别拉满容器，完全不保持原始比例。人像变胖、文字糊成色块、横幅扭曲，是 iOS 和安卓低端机上最常被截图投诉的问题。而 background-size: contain 虽然不拉伸，但上下/左右必留白，根本不是“全屏”。cover 的行为是等比缩放 + 裁切——这不是 bug，是设计预期。
常见错误现象：
- 只写
background-size: cover却漏掉background-position，结果关键内容（如人脸、标题）被裁掉一半 - 用
height: 100%依赖父级高度，但html和body默认不占满视口，导致背景图只显示一条 - 把背景加在
.container上，被默认padding和.row的负margin截断边缘
移动端必须用 min-height: 100vh 而非 height: 100vh
iOS Safari 和部分安卓浏览器中，height: 100vh 按页面加载时的视口高度计算，地址栏收起/弹出后不重绘，导致背景突然顶部被砍或底部留白。这不是代码错，是规范限制。
稳妥做法是组合使用：
-
min-height: 100vh—— 确保至少一屏高，内容超长时可滚动延展 -
height: 100dvh—— Chrome 104+、Safari 16.4+ 支持，响应地址栏变化，需作为降级兜底 - 绝对避免单独依赖
height: 100%，它依赖父级高度，而 Bootstrap 中.container默认不撑高
绕开 Bootstrap 栅格干扰的两种实操路径
直接给 .container 或 .row 加背景图，边缘必留白——不是图片小，是栅格自带 padding 和负 margin 在捣鬼。
推荐方案：
- 绕开栅格：用独立容器，如
<div class="hero-bg">，不套任何.container，再单独写 CSS - 强行修正：若必须嵌套，父容器加
mx-n3 px-0（抵消.row的-1rem margin和.container的padding） - 检查祖先元素是否设了
overflow: hidden——它会把cover裁切的部分直接截断，看起来像图被“切了一半”
图片加载失败时的 fallback 处理容易被忽略
网络慢或路径错误，background-image 加载失败，浏览器静默降级为透明背景。此时若没设 background-color，底色暴露，文字与空白对比突兀，主观上“变形感”更强。
必须加 fallback：
- 用
background-color设一个与图片主色调接近的纯色，比如深灰#2c3e50 - 别依赖 Bootstrap 的
.bg-dark等工具类——它们只设纯色，且会覆盖自定义背景图 - 真机调试时，用 DevTools 的 Network 面板确认图片是 200 还是 404
真正难的不是写对那几行 CSS，而是理解 cover 的裁切逻辑、vh 在移动端的不可靠性、以及 Bootstrap 栅格对视觉边界的隐性约束——这些点不处理，哪怕样式复制得再准，上线后照样被用户反馈“iPhone 上图变形”。
