cover适合氛围型背景（如banner），允许裁切；contain适合功能性图片（如logo），要求完整可见。选哪个取决于图是“用来衬托”还是“用来传达”。
cover 会裁图，contain 会留白，选哪个取决于你更怕什么
直接说结论：cover 适合氛围型背景（比如 banner、全屏海报），只要视觉饱满，允许关键内容被切掉；contain 适合功能性图片（比如 logo、产品图、示意图），必须完整可见，能接受四周有空白。
这不是“哪个更好”，而是“哪个更不伤需求”。很多项目踩坑，是因为没想清楚：这张图是「用来衬托」还是「用来传达」。
cover 裁哪？由 background-position 和容器宽高比共同决定
cover 的缩放倍数是 max(containerWidth / imageWidth, containerHeight / imageHeight)，它永远优先填满短边。所以裁剪一定发生在长边——但具体裁上/下/左/右，取决于 background-position 值。
- 默认
background-position: center，图像居中，上下或左右对称裁剪 - 若关键内容在左上角（如带文字的 banner），应显式设为
background-position: top left，把主体“钉”在可视区左上 - 父容器若没设
height（比如height: auto），cover就失去计算基准，图可能缩成一小块或卡在左上角不动 - 移动端横竖屏切换时，容器宽高比突变，裁剪区域重算剧烈，仅靠 DevTools 模拟不够，必须真机验证
contain 留白位置可控，但不能“自动放大”
contain 的缩放倍数是 min(containerWidth / imageWidth, containerHeight / imageHeight)，它永远优先让长边贴住容器边界。所以留白一定出现在短边——但留哪边，由 background-position 控制。
立即学习“前端免费学习笔记（深入）”；
- 默认
center→ 白边居中，图在中间 - 设
top left→ 图贴左上角，白边全堆在右下 - 设
bottom right→ 图贴右下角，白边全堆在左上 - 别指望
contain把小图“撑大”——如果容器是1200×800，原图只有200×150，它只会缩到200×150居中显示，不会放大 - 若需防过小，得配合
min-width/min-height或媒体查询兜底
当 cover 和 contain 都不理想时，换方案
遇到既要“铺满”又要“不裁”，说明当前用 background-image 是错的抽象层。这时候该退一步，用语义更清晰、控制更细的方案：
- 改用
<img alt="CSS中background-size设为cover与contain怎么选" >+object-fit: contain或cover，配合position: absolute和inset: 0模拟背景行为 - 这样支持
srcset、可访问性（alt 文本）、懒加载，且object-fit行为与background-size一一对应，调试更直观 - 多背景图场景下，
background-image无法单独控制每张图的缩放，而多个<img alt="CSS中background-size设为cover与contain怎么选" >可分别设置object-fit - 高 DPI 设备模糊问题也更容易解决——
<img alt="CSS中background-size设为cover与contain怎么选" >可直接配srcset，background-image得靠媒体查询或 JS 动态换图
真正难的不是选 cover 还是 contain，而是判断这张图到底该不该当背景用。
