cover等比缩放完全覆盖容器可能裁剪，contain等比缩放完整显示在容器内可能留白；防变形多用cover，全显图才用contain；需配合background-position控制裁剪区域。
background-size: cover 和 contain 的区别必须分清
拉伸变形的根源，往往是你用了 background-size: 100% 100% 或没设 background-size（默认是 auto，等同于只铺满宽度、高度按比例缩放，但容器尺寸不匹配时就会裁切或留白）。真正可控的两个值是 cover 和 contain：
-
cover：图片等比缩放，完全覆盖容器——可能被裁剪，但不会变形 -
contain：图片等比缩放，完整显示在容器内——可能留白，但绝不变形
多数“防变形”需求其实要的是 cover，尤其全屏 Banner；若要求图全显（如证件照预览），才用 contain。
用 background-position 精确控制裁剪区域
选了 cover 后，图片被裁剪的位置默认是居中（background-position: center），但关键内容常不在正中。比如一张人像图，头被裁掉就糟了。
这时必须显式设置 background-position：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
body {
background-image: url("portrait.jpg");
background-size: cover;
background-position: top center; /* 让头顶尽量保留 */
}- 常用值：
top/center/bottom+left/center/right - 也可用像素或百分比，如
background-position: 20% 30%（横向20%，纵向30%） - 注意：百分比取值逻辑是“图片对应点对齐容器对应点”，不是简单偏移
慎用 background-attachment: fixed
加了 background-attachment: fixed 做视差效果时，容易发现图片在滚动中突然“跳变”或局部拉伸——这不是 bug，是浏览器对 fixed 背景的重绘策略导致的尺寸计算偏差，尤其在缩放或高 DPI 屏幕下更明显。
- 优先考虑用 CSS transform 模拟视差，而非
fixed - 如果必须用
fixed，务必搭配background-size: cover和明确的background-position，避免依赖默认行为 - 移动端 Safari 对
fixed背景支持不稳定，部分机型会自动降级为scroll
响应式场景下 background-size 必须配合媒体查询重设
同一张图在桌面端用 cover 很好，到了手机竖屏可能把人脸整个裁掉。不能指望一个值通吃所有断点。
@media (max-width: 768px) {
.hero {
background-size: contain;
background-position: top;
}
}- 常见组合：桌面用
cover+center，手机改contain或cover+top - 不要只靠
background-size: 100% auto—— 它强制宽度撑满，高度自由缩放，极易在窄容器里把图压扁 - 如果图源分辨率跨度大（如同时服务 1x/2x 屏幕），记得用
image-set()或srcset配合picture元素，纯 CSS 控不住像素级失真
实际最易被忽略的点：父容器没有明确宽高时，background-size: cover 会失效——因为“覆盖容器”无从算起。务必确认该元素有可计算的 width 和 height（哪怕是 min-height: 100vh）。
