cover适用于填满容器且允许裁剪的场景，按原图宽高比缩放至短边触达容器边界，长边溢出被隐藏；contain适用于完整可见且接受留白的场景，缩放至长边触达边界，短边留空。
cover 适合“填满容器，允许裁剪”场景
当你明确需要背景图撑满整个元素、且能接受部分内容被切掉时，background-size: cover 是唯一合理选择。它按原图宽高比缩放，直到**短边触达容器边界**，再居中放置——长边必然溢出，溢出部分被隐藏。
常见错误现象：background-size: cover 用在带标题或按钮的卡片上，结果人脸/文字被裁掉；响应式变窄后关键内容突然消失；没配 background-position，默认居中导致左侧操作区只剩天空。
- 必须搭配
background-repeat: no-repeat，否则重复平铺时裁剪逻辑失效 -
background-position只能挪动整张缩放后的图，不能指定“保留头部”或“对齐左上角文字” - 容器宽高比变化时（比如竖屏切横屏），裁剪区域会动态重算，小屏幕下尤其容易误切重要内容
contain 适合“完整可见，留白可接受”场景
background-size: contain 的目标是让整张图“100%可见”，它按原图宽高比缩放，直到**长边刚好触达容器边界**，短边则必然留空——这不是 bug，是设计行为。
典型误用：把它当“自动适配”用在 banner 上，结果图缩成邮票大小，四周大片空白；或没设 background-position，图居中后右侧留白严重，破坏布局对齐。
立即学习“前端免费学习笔记（深入）”；
- 留白位置由
background-position决定，默认center，可改用top left把图压到左上角 - 若容器又宽又高（比如大屏侧边栏），图可能缩得极小，需配合
min-width/min-height或媒体查询兜底 - 如果设了
background-repeat: repeat，留白区会平铺缩放后的图，铺不满的部分仍会被裁——这很少是想要的效果
两者都不满足时，别硬套 CSS
真正棘手的是：既要关键内容（比如人脸、logo、操作按钮）100%可见，又不能留白——这时纯靠 cover 或 contain 已经失效。
- 换用
<img>标签 +object-fit: cover+object-position，比 background 更可控 - 服务端生成多尺寸图，前端用
<picture>+srcset匹配不同 DPR 和视口，精度远超 CSS 缩放 - 对重要图像标注焦点区域（如 Adobe Subject Area），再用 JS 读取并动态计算
background-position偏移
兼容性和性能注意点
cover 和 contain 在 IE9+、所有现代浏览器都支持，但 IE8 及更早版本完全不识别——如果还要兼容，得用滤镜 hack 或降级为固定尺寸图。
性能上两者无差异，但要注意：无论选哪个，只要图像原始尺寸过大，都会触发额外解码和内存占用；移动端尤其要避免用 4K 图配 cover，加载慢 + 渲染卡顿。
最常被忽略的其实是图像本身的宽高比——它直接决定裁剪或留白的位置和程度，而这个信息在写 CSS 之前就已固定，没法靠样式修正。
