background-size: cover是手机端防拉伸的正确方案，本质是等比缩放+裁切而非拉伸；需搭配min-height: 100vh、background-position: center center、background-repeat: no-repeat，并规避100% 100%冲突、栅格干扰及图片加载失败。
background-size: cover 是唯一可靠选择
手机端背景图拉伸变形，90% 是因为用了 background-size: 100% 100% 或 background-size: contain。前者强制等比拉伸，人像变胖、文字糊成色块；后者虽不拉伸但留白，根本不是“全屏”。background-size: cover 才是设计初衷：等比缩放，短边填满容器，长边自然裁切——这不是 bug，是行为预期。
必须搭配 background-position: center center，否则默认从左上角对齐，关键内容（如人脸、标题）大概率被裁掉。若需保顶部人物，改用 center top；要突出底部标语，用 center bottom。
height: 100vh 在手机端会失效，改用 min-height: 100vh + height: 100dvh
iOS Safari 和部分安卓浏览器中，height: 100vh 按页面加载时的视口高度计算，地址栏收起/弹出后不重绘，导致背景突然留白或顶部被砍。这不是代码错，是规范限制。
稳妥做法是组合使用：
-
min-height: 100vh—— 确保至少一屏高，内容超长时可滚动延展 -
height: 100dvh—— 现代浏览器支持，响应地址栏变化（Chrome 104+、Safari 16.4+），但需降级兜底 - 避免单独依赖
height: 100%，它依赖父级高度，而html和body默认不占满视口
Bootstrap 栅格干扰背景图边缘，必须绕开或抵消
直接给 .container 或 .container-fluid 加背景图，边缘必留白——不是图片小，是 Bootstrap 自带 padding（.container-fluid 默认 0.5rem）和 .row 的负 margin 在捣鬼。
两种解法：
- 绕开栅格：用独立容器，如
<div class="hero-bg">，不套任何 <code>.container - 强行修正：若必须嵌套，父容器加
mx-n3 px-0（抵消.row的-1remmargin 和.container的 padding） - 检查祖先元素是否设了
overflow: hidden—— 它会把 cover 裁切的部分直接截断，看起来像图被“切了一半” - 用
background-color设一个与图片主色调接近的纯色，比如深灰#2c3e50 - 别依赖 Bootstrap 的
.bg-*工具类——它们只设纯色，且会覆盖自定义背景图 - 真机调试时，用浏览器 DevTools 的 Network 面板确认图片是否 404，别只看 CSS 是否生效
图片加载失败时，拉伸变形感会更强烈
网络慢或路径错误，background-image 加载失败，浏览器静默降级为透明背景，此时若没设 background-color，底色暴露，文字与空白对比突兀，主观上“变形感”更强。
必须加 fallback：
真正让背景图在手机端不拉伸，靠的不是调参技巧，而是控制好容器高度继承链、避开栅格干扰、接受 cover 的裁切逻辑并主动用 background-position 引导视觉焦点——参数只是最后一环，底子塌了，再调也没用。
