cover会按原图比例缩放至短边触达容器边界导致长边裁剪，contain则缩放至长边触达边界留下白边，二者均不拉伸变形且缩放倍数由max/min公式确定。
background-size: cover 为什么图片被切掉了
因为 cover 的目标是“填满容器”，不是“显示全图”。它会按原图宽高比缩放，直到**短边刚好触达容器边界**，然后居中放置——长边必然超出，超出部分被裁剪。这不是 bug，是设计行为。
常见错误现象：background-size: cover 用在带标题的 banner 上，结果文字区域只剩天空；响应式变窄后，人脸突然消失；没设 background-position，默认居中导致关键内容偏出可视区。
- 必须搭配
background-repeat: no-repeat，否则重复平铺时裁剪逻辑混乱 -
background-position只能挪动整张缩放后的图，不能“锁定头部”或“对齐按钮” - 容器宽高比一变，裁剪区域就重算——小屏下尤其危险
- 父容器若没设
width和height（比如height: auto），cover就失去参考系，图缩在左上角
background-size: contain 为什么四周都是白边
contain 的目标是“整张图必须可见”，所以它按原图宽高比缩放，直到**长边刚好触达容器边界**，短边自然留空。这不是适配失败，是它在守约。
典型误用：当成“自动放大”用在横幅上，结果图缩成邮票大小；或没调 background-position，图居中后右侧大片留白，破坏按钮对齐。
- 留白位置由
background-position控制，默认center，可改用top left把图压到左上角 - 当容器又宽又高（比如大屏侧边栏），图可能缩得极小，需配合
min-width/min-height或媒体查询兜底 - 如果误设了
background-repeat: repeat，留白区会平铺缩放后的图——铺不满的部分仍被裁，这很少是想要的效果
cover 和 contain 的缩放倍数怎么算
两者都保持原图宽高比，但缩放依据不同，本质是数学取舍：
-
cover：缩放倍数 =max(containerWidth / imageWidth, containerHeight / imageHeight) -
contain：缩放倍数 =min(containerWidth / imageWidth, containerHeight / imageHeight)
也就是说，cover 看谁更“卡不住”，contain 看谁先“顶到头”。它们都不拉伸变形，也不靠 guess，全是确定性计算。
移动端要注意：DPR 高、viewport 缩放、iOS Safari 对图层处理激进，可能导致本该 cover 的图多缩一次——建议用大图源（≥2× 容器最大尺寸）+ background-position: center center + 真机验证。
cover 和 contain 都不满足时怎么办
当你要的是：关键内容（比如人脸、logo、操作按钮）100% 可见，又不能留白，还不能裁剪——这时纯靠 cover 或 contain 已经失效。
这不是 CSS 的缺陷，而是需求超出了这两个关键词的设计边界。真实项目里，得组合手段解决：
- 用
object-fit: cover+<img>替代背景图，再用clip-path或伪元素遮罩关键区域 - 服务端生成多尺寸图，前端用
picture+srcset按断点选最适配的图 - JS 动态计算容器与图的宽高比差值，调整
background-position偏移量保重点
别硬套，先确认：你真需要“背景图”吗？还是只是“图要撑满某块区域”？后者用 <img> 往往更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
