background-size: cover本身不拉伸图片，所谓“拉伸”实为裁剪错位或容器高度失控导致的视觉误判；必须配合min-height: 100vh、background-repeat: no-repeat和background-position: center center三行css，并确保高度链完整、定位精准，才能真正生效。
它在移动端被广泛用，不是因为它“开箱即用”，而是因为它是唯一能在不同屏幕宽高比下**保持图片不拉伸变形**的缩放方式——前提是容器高度可控、定位可调、冲突被排除。
background-size: cover 本身不拉伸，但容易被误判为拉伸
所谓“拉伸”，90% 是视觉错觉：图片没变形，只是裁错了区域。常见现象包括 iPhone 竖屏人脸消失、安卓刘海屏 Banner 文字被切半、滚动时背景图突然跳变模糊。根本原因不是 cover 失效，而是它作用的容器没有可靠高度依据。
-
height: auto或父级未设height/min-height→ 子元素height: 100%算出 0 或极小值 -
100vh在 iOS Safari 中随地址栏收起/弹出实时重算 → 容器高度突变 →cover缩放基准跳变 - 写了
background-size: 100% 100%却没删干净 → 优先级覆盖cover -
background-attachment: fixed没配background-position→ Safari 滚动重绘异常，出现局部“拉伸抖动”假象
移动端必须写的三行 CSS 才算真正生效
缺一不可，不是可选优化：
- 容器必须有明确高度参考：
min-height: 100vh（比height: 100vh更安全，防内容撑高后背景截断） - 禁用平铺：
background-repeat: no-repeat（否则小图会被重复铺满，和cover冲突） - 强制锚点居中：
background-position: center center（两个center比单写center更稳妥，避免部分安卓内核解析偏差）
background-position 不调等于默认砍一半
设计稿里的人脸、Logo、标题很少在正中心。移动端屏幕窄，background-position: center center 一裁就丢重点。尤其竖屏，顶部常被切掉。
-
background-position: top center—— 适合人像、标题居上的图，保头顶 -
background-position: bottom center—— 适合底部有按钮或 CTA 的 Banner - 用百分比更精准：
background-position: 50% 20%表示“图片横向中点对齐容器中点，纵向 20% 位置对齐容器顶部” - 别只写
center，那是center center的简写，不是“安全居中”
真正难搞的是高度链断裂——从 html 和 body 开始漏掉任意一层 height 或 min-height，cover 就回到“猜高”模式；真机上这比模拟器更明显，因为模拟器不触发地址栏高度变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
