background-size: cover不会拉伸变形，它等比缩放并裁剪以完全覆盖容器；“拉伸”错觉多因误用100% 100%、未设明确容器高度、background-position不当或父容器塌陷所致。
直接说结论：background-size: cover 本身**不会拉伸变形**，但它会等比例缩放并裁剪——如果你看到“拉伸”，大概率是误用了 100% 100%，或者没配好 background-position 和容器尺寸。
为什么 background-size: cover 看起来像拉伸了
它其实严格保持图片原始宽高比，只是为“完全覆盖”而放大到最小必要尺寸。当视口宽高比和图片差异大时（比如竖图配横屏），放大后上下/左右必然被裁掉一部分，人眼容易误判为“图片被撑开”。
- 常见错误现象：
background-size: cover+background-position: top left→ 图片关键内容（如人脸）被切掉 - 实际原因：裁剪位置偏移，不是变形；
cover从不改变像素比例 - 性能影响：无额外开销，浏览器原生支持，所有现代浏览器兼容
- 典型使用场景：全屏 Hero 区、登录页背景、营销落地页 —— 要视觉冲击力，允许合理裁剪
background-size: cover 必须配合的三个属性
单写 cover 很容易翻车，尤其在移动端或全屏切换时。这三项缺一不可：
-
background-repeat: no-repeat—— 否则小图会被平铺，和cover冲突 -
background-position: center—— 确保裁剪居中，保留构图核心区域 - 容器高度必须明确，比如
min-height: 100vh或height: 100vh—— 否则cover没参照系，可能缩成一团
错误示例：div { background-size: cover; }（没设高、没禁重复、没定位）→ 图片可能只显示左上角一小块。
和 contain、100% 100% 的关键区别
三者行为完全不同，选错就等于选错目标：
-
cover：等比放大，填满容器 → 可能裁剪，**不拉伸** -
contain：等比缩小，完整显示 → 可能留白，**不拉伸** -
100% 100%：强制拉宽又拉高 → **一定拉伸变形**，除非图片和容器比例完全一致
如果设计师强调“人物不能被切”，别硬扛 cover，换 contain + background-color 填空白更稳妥。
全屏切换时图片突然放大？检查 viewport 和 fixed 定位
全屏模式下 cover 放大感加剧，往往不是 CSS 问题，而是布局塌陷或定位干扰：
- 用
background-attachment: fixed时，某些浏览器（尤其 Safari）在全屏下会重算缩放基准，导致跳变 -
body没设margin: 0或padding: 0→ 实际可视区域小于100vh，cover按小尺寸缩放，退出全屏后显得“变小” - 响应式断点没覆盖全屏宽度（如
@media (min-width: 1920px)漏掉 2560px），导致媒体查询失效，回退到默认样式
最简验证法：临时加 border: 1px solid red 到背景容器，看是否真填满整个视口——很多“放大”其实是容器本身没占满屏幕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
