background-size: cover 是唯一能真正防止移动端背景图缩放变形的方案，因其强制等比缩放、短边撑满容器、长边自然裁切，而100% 100%会破坏宽高比导致拉伸，contain则必然留白；它必须配合min-height: 100vh（或100dvh）、background-position: center center和background-repeat: no-repeat才能可靠生效。
background-size: cover 是唯一能真正防止移动端背景图缩放变形的方案，其他写法基本都会出问题。
为什么 100% 100% 在手机上一定拉伸变形
它强制把图片宽高都拉到容器尺寸，完全不顾原始比例。人像变胖、文字糊成色块、按钮位置偏移——不是 CSS 写错了，是这个值本身的设计意图就是“填满即止”。background-size: contain 虽然不拉伸，但留白严重，banner 区域常只剩中间一窄条图。
-
cover才是正确解：等比缩放 → 短边撑满容器 → 长边自然裁切 - 必须搭配
background-position: center center，否则默认从左上角对齐，关键内容（比如人脸、标题）大概率被裁掉 - 千万别在同一个声明里混用
100% 100%和cover，浏览器会按规则优先级忽略后者
min-height: 100vh 在 iOS Safari 上失效怎么办
地址栏收起/弹出时，100vh 不重绘，导致背景突然顶部被砍或底部留白。这不是 bug，是规范限制。
- 稳妥组合：
min-height: 100vh+height: 100dvh（Chrome 104+、Safari 16.4+ 支持） - 降级兜底：加媒体查询
@supports not (height: 100dvh) { height: 100vh; } - 别只写
height: 100%——它依赖父级高度，而html和body默认不占满视口
Bootstrap 栅格会让背景图边缘留白，怎么绕开
直接给 .container 或 .row 加背景图，边缘必出白边。不是图片小，是 Bootstrap 的 padding 和 margin 在干扰。
- 推荐做法：用独立 wrapper，比如
<div class="hero-bg"></div>，不套任何栅格类 - 如果必须嵌套，父容器加
mx-n3 px-0抵消.row的负 margin 和.container的 padding - 检查祖先元素是否设了
overflow: hidden——它会把cover裁切的部分直接截断，看起来像图被“切了一半”
图源分辨率不足时，cover 也救不了模糊
CSS 再精准也变不出像素。一张 1920×1080 的图，在 iPhone 15 Pro 的 2x 屏上会被拉伸渲染，结果就是发虚。
- 高倍屏设备必须配高分辨率图源（如 3840×2160），或用
image-set()做条件加载（注意 Safari 支持弱） - 别指望
background-image自动适配 DPR；img-fluid类对背景图无效 - 真机调试时，用 DevTools 的 Network 面板确认图片是否 404——加载失败时，fallback 色块和空白对比更强烈，主观上“变形感”更强
最易被忽略的是：所有这些设置都得写在**有明确高度的块级元素上**，而不是 .container 这类流式容器里。一旦父级塌陷，cover 就失去计算基准，缩放行为就不可控了。
