background-size: cover 本身不拉伸图片，问题在于容器高度失控；根本原因是父级未设可靠高度（如 height/min-height），导致 100% 高度计算失效或 100vh 在 iOS/安卓中动态变化，进而使 cover 缩放基准跳变。
background-size: cover 本身不拉伸，是容器高度失控了
它根本没拉伸图片，只是你看到的那部分被裁错了。常见现象包括：iPhone 竖屏下人脸消失、安卓刘海屏 Banner 文字被切半、滚动时背景图突然跳变模糊。根本原因不是 cover 失效，而是它作用的容器没有可靠高度依据。
- 父级未设
height或min-height，子元素用height: 100%就会“掉链子”，算出 0 或极小值 -
100vh在 iOS Safari 中会随地址栏收起/弹出实时重算，导致容器高度突变 →cover缩放基准跟着跳 - 写了
background-size: 100% 100%却没删干净，CSS 优先级覆盖了cover - 用了
background-attachment: fixed但没配background-position，Safari 滚动重绘异常，出现局部拉伸假象
iOS 上必须从 html/body 开始打断 height: auto 链
只给最外层容器设 height: 100vh 不够，漏掉中间任意一层 display: flex 或普通块级容器，cover 就回到“猜高”模式。真机上这比模拟器更明显，因为模拟器不触发地址栏高度变化。
-
html和body都要加height: 100%或min-height: 100vh - 每一层父容器（比如
.hero-section、.hero-content）都要显式设height: 100%或min-height: 100vh - 安卓软键盘弹出时
100vh也会塌，建议改用min-height: 100vh+height: auto组合 - 极端场景可加
min-height: -webkit-fill-available兜底 iOS
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的简写，不是“安全居中”
安卓软键盘弹起时背景图跳动，cover 不扛这事
这是布局层问题，不是背景图缩放问题。软键盘压缩视口高度，触发页面重排，fixed 元素或 body 高度计算错位，导致渲染区域突变。
立即学习“前端免费学习笔记（深入）”；
- 别给
body设position: fixed—— iOS 可能白屏，安卓反而更难控制滚动 - 把背景图挂到独立
div上：position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; - 加兜底：
@media (max-height: 600px)里临时切为background-size: contain，避免键盘顶上来后只剩眼睛 - 小屏（
max-width: 480px）建议直接用contain+background-position: top，确保关键内容全显
cover 写没写对，而在容器有没有被真正约束住——宽高比、最小高度、定位偏移、键盘干扰，缺一不可。很多人调了一下午 background-size，却忘了第一层 html 根本没设高度。 
