background-size: cover 不拉伸变形，只等比缩放并裁剪；所谓“拉伸”实为容器无高度、background-size: 100% 100% 冲突、background-position 未设或错位所致，必须配 min-height: 100vh、background-repeat: no-repeat 和 background-position: center center 才能生效。
background-size: cover 本身就不让图片变形——它强制等比缩放，只裁剪，不拉伸。你看到的“变形”，基本是容器失控、样式冲突或定位错位导致的视觉误判。
为什么写了 cover 还是看起来被拉伸了
根本不是 cover 失效，而是它没生效条件：
-
background-size: 100% 100%和cover同时存在，前者会覆盖后者（尤其在内联样式或!important场景下） - 父容器
height是auto或未设值，cover缺失缩放参照，浏览器按内容高度缩放，图缩成左上角一小块 -
background-position没显式声明，部分安卓 WebView 或旧版 iOS Safari 会回退到0% 0%，人脸直接被切掉半张脸 - 用了
background-attachment: fixed却没配background-position，Safari 滚动时重绘异常，局部出现“拉伸抖动”假象
真正让 cover 生效的三行基础 CSS
缺一不可，不是可选优化：
- 容器必须有明确高度参考：
min-height: 100vh（比height: 100vh更安全，防内容撑高后背景截断） - 禁用平铺：
background-repeat: no-repeat（否则小图会被重复铺满，和cover冲突） - 强制锚点居中：
background-position: center center（两个center比单写center更稳妥，避免部分安卓内核解析偏差）
cover 和 contain 的行为差异直接影响裁剪结果
选错就等于白配：
立即学习“前端免费学习笔记（深入）”；
-
cover：图片缩放到「短边刚好填满容器」，长边溢出 → 必然裁剪，适合氛围图、风景图 -
contain：图片缩放到「长边刚好贴住容器」，短边留白 → 安全但可能有白边，适合 logo、带文字 Banner - 误写成
100% 100%或auto才真会拉伸变形；cover和contain都强制等比，不会失真
关键内容总被裁？别硬扛 cover，改用 background-position 精控
cover 的裁剪逻辑是机械的：等比放大后居中覆盖。你要的不是“不裁”，而是“裁对地方”：
- 人物/标题在图上方 → 改用
background-position: center top或background-position: 50% 20% - 底部有按钮/CTA → 用
background-position: center bottom，保脚不切鞋 - 避免像素值（如
20px 40px），响应式下完全失控；百分比（如30% 70%）或关键词更稳 - 如果设计师强调“人脸绝对不能被切”，
cover就不该是首选——换background-size: contain+background-color填白更稳妥
最常被忽略的一点：背景图是否真的挂载在有高度约束的元素上？cover 不关心你图多大，只认容器尺寸——容器塌陷，再高清的图也只显示左上角 20×20 像素。
