cover 保证容器完全覆盖但可能裁剪图像，contain 保证图像完整可见但必然留白；前者适用于全屏氛围图，后者适合图标等需保全细节的场景。
background-size: cover 和 contain 的核心行为差异
两者都用于让背景图填满容器，但缩放逻辑完全不同：cover 保证容器被完全覆盖（可能裁剪），contain 保证整张图完整可见（可能留白）。这不是“哪个更好”，而是“你要优先保什么”——是画面不露空，还是内容不被切掉。
什么时候该用 cover？常见误用场景
适合全屏 Banner、氛围图、无关键信息的装饰性背景。容易踩的坑是直接套在含文字的卡片上，导致文字区域被图片重点部位遮挡或拉伸变形。
-
cover会按比例缩放图片，再居中裁剪，**裁剪位置不可控**（始终以图片中心为锚点） - 如果原图宽高比和容器差异大，顶部/底部/左右必有部分被切掉，无法通过 CSS 指定保留哪一块
- 响应式时，容器尺寸变化会动态重算裁剪区域，小屏幕可能突然切掉人脸或标题文字
div {
background-image: url("hero.jpg");
background-size: cover;
background-position: center; /* 默认就是 center，显式写出来更可控 */
}contain 更适合哪些具体需求？
适用于图标、产品截图、带文字说明的示意图等——图像本身是信息载体，不能丢细节。但要注意它只解决“显示全”，不解决“是否够大”。
-
contain缩放后整图放入容器，**必定留白**（除非图和容器比例刚好一致） - 留白位置由
background-position决定，默认center，可改用top left把图压到左上角 - 当容器很宽很高时，图片可能缩得极小，视觉上几乎看不见，需配合
min-width/min-height或媒体查询兜底
img-icon {
background-image: url("logo.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: left center; /* 左对齐，避免右侧大片空白 */
}cover / contain 都搞不定时的替代方案
真正难的是既要完整显示关键内容，又不能留白——这时靠纯 CSS 的 cover 或 contain 已经不够用。
立即学习“前端免费学习笔记（深入）”；
- 用
object-fit: cover+<img>标签，配合background-position等效属性（如object-position）手动控制裁剪区域 - 服务端生成多尺寸图，前端用
<picture>+srcset匹配不同 DPR 和视口，比纯 CSS 更精准 - 对重要图像做“焦点区域标注”（如 Adobe 的 Subject Area），再用支持
image-orientation或 JS 计算的方案动态调整
cover 和 contain 看似简单，但实际项目里，80% 的背景图问题出在没想清楚：你到底是在适配容器，还是在保护图像语义。后者往往需要跳出 background-size 思维。
