background-size: cover 本身不拉伸，所谓“变形”实为裁剪错位或配置缺失导致的视觉误判；根本原因包括容器无高度、background-size: 100% 100% 冲突、background-position 未显式设置等。
background-size: cover 本身不会拉伸变形，但单独写它几乎必然出问题——拉伸错觉90%来自容器没设高、写了 background-size: 100% 100% 却没删干净，或 background-position 没配准。
为什么写了 cover 还是看起来被拉伸了
它根本没拉伸，只是你看到的“压扁”或“撑开”其实是裁剪错位导致的视觉误判。常见真实原因：
-
background-size: 100% 100%和cover同时存在，前者优先级更高（尤其在内联样式或!important 覆盖时） - 父容器
height是auto或未设置，cover失去参照系，浏览器按内容高度缩放，图缩成左上角一小块 -
background-position没显式声明，旧版 iOS Safari 或某些安卓 WebView 会回退到0% 0%（左上角），人物直接被切掉半张脸 - 用了
background-attachment: fixed却没配background-position，Safari 滚动时重绘异常，局部出现“拉伸抖动”假象
移动端必须写的三行 CSS 才算真正生效
缺一不可，不是可选优化：
- 容器必须有明确高度参考：
min-height: 100vh（比height: 100vh更安全，防内容撑高后背景截断） - 禁用平铺：
background-repeat: no-repeat（否则小图会被重复铺满，和cover冲突） - 强制锚点居中：
background-position: center center（两个center比单写center更稳妥，避免部分安卓内核解析偏差）
错误示例：div { background-size: cover; } → 没高、没禁重复、没定位，大概率只显示图片左上角。
立即学习“前端免费学习笔记（深入）”；
关键内容总被裁？别硬扛 cover，改用 background-position 精控裁剪区域
cover 的裁剪逻辑是机械的：等比放大后居中覆盖。你要的不是“不裁”，而是“裁对地方”。
- 人物/标题在图上方 → 改用
background-position: center top或background-position: 50% 20%（图像纵向 20% 处对齐容器顶部） - 底部有按钮/CTA → 用
background-position: center bottom，保脚不切鞋 - 避免像素值（如
20px 40px），响应式下完全失控；百分比（如30% 70%）或关键词更稳 - 如果设计师强调“人脸绝对不能被切”，cover 就不该是首选——换
background-size: contain+background-color填白更稳妥
安卓软键盘弹起时背景“跳动”或“挤压”，cover 不背这个锅
这是布局层塌陷，不是背景图缩放问题。软键盘压缩视口高度，触发重排，body 高度计算错位，导致背景渲染区域突变。
- 别给
body设position: fixed—— iOS 可能白屏，安卓反而更难控制滚动 - 推荐方案：用独立
div挂背景，设position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;，再配cover和background-position - 加兜底媒体查询：
@media (max-height: 600px) { .full-bg { background-size: contain; } }，避免键盘顶上来后只剩眼睛
真正容易被忽略的是：viewport meta 标签没加，或图片分辨率不够大（建议 ≥ 2× 容器最大可能尺寸），这两项不解决，其他都白调。
