cover等比缩放至至少一边撑满容器，必裁剪；contain等比缩放至完全可见，必留白；二者均不拉伸变形，而100% 100%强制拉伸会失真。
background-size: cover 会裁剪图片，但能填满容器
用 cover 时，浏览器会等比缩放图片，直到图片的宽和高**至少有一个**撑满容器对应方向。这意味着另一方向必然溢出——被裁掉。常见于全屏轮播图、登录页背景，你想要“无空隙覆盖”，就得接受边缘内容可能消失。
- 如果原图是 4:3，容器是 16:9，顶部/底部一定被切掉
-
background-position会影响哪部分被保留（默认居中，所以中间最安全） - 响应式布局下，窗口缩放时裁剪区域会变，别把关键文字放在图边缘
background-size: contain 保证完整显示，但留白不可避免
contain 是等比缩放图片，直到**宽和高都完全在容器内**。结果就是：图片肯定完整，但大概率留黑边或白边。适合图标背景、卡片内嵌示意图这类“内容优先”的场景。
- 如果容器宽高比和图片不一致，必定有空隙；空隙位置由
background-position决定（默认还是居中） - 在 flex 或 grid 容器里用
contain，要小心父容器 padding 或 margin 挤压可用空间 - 别指望它“自动居左对齐”——想靠左就得显式写
background-position: left center
cover 和 contain 在 Retina 屏上表现一致，但图片源分辨率必须够
这两个值本身不处理像素密度，只管缩放逻辑。但实际效果是否清晰，取决于你提供的图片分辨率。比如一个 800×600 的图设为 cover 在 2x 屏上拉伸到 1600×1200，就会模糊。
- 用
background-image: url(img@2x.jpg)配合媒体查询是稳妥做法 - CSS 中不能直接写 “2x” 后缀，得靠
@media (-webkit-min-device-pixel-ratio: 2)切换 - SVG 作背景时天然适配，
cover/contain行为不变，且无模糊风险
不要用 background-size: 100% 100% 替代 cover
100% 100% 是强制拉伸，完全不保持宽高比——图片会变形。这是和 cover 最容易混淆的操作，错误现象通常是人物脸变胖、文字被压扁、图标扭曲。
立即学习“前端免费学习笔记（深入）”；
- 调试时看到图片“被拉宽/压扁”，第一反应查是不是误写了
100% 100% - 即使你确定容器比例固定，也别用它替代
cover：语义不清，后续维护者无法判断设计意图 - 真需要非等比拉伸？那得明确承认这是特殊需求，并加注释说明
cover 和 contain 的区别不在“好不好看”，而在“要不要牺牲完整性换填充感”。选错的后果不是报错，而是上线后设计师突然找你问：“为什么用户看不到 logo 全貌？”——这种问题往往卡在视觉验收环节，很难从代码里一眼看出。
