background-size: cover 是按数学规则等比缩放并居中裁剪，非智能构图识别；裁剪由容器与图片宽高比差异决定，需确保容器有明确尺寸、background-repeat: no-repeat、background-position: center center，且避免 background-attachment: fixed 干扰。
background-size: cover 的裁剪是设计行为，不是 bug
它根本没打算“保留全部内容”，而是按数学规则执行：等比缩放图片，直到短边刚好触达容器边界，再居中放置。超出部分自然被容器裁掉——这和你设overflow: hidden在父元素上效果一致。
常见误解是“cover 应该智能识别主体”，但它不读像素、不分析构图，只做两件事：保持宽高比、填满容器。所以当图片宽高比（比如 16:9）和容器宽高比（比如 4:3 或 9:16）不同时，裁剪必然发生。
-
cover缩放倍数 =max(containerWidth / imageWidth, containerHeight / imageHeight) - 容器越窄高（如手机竖屏），越容易裁上下；越宽矮（如桌面横屏），越容易裁左右
- 裁剪区域始终对称，除非你改了
background-position
为什么写了 cover 还看到白边或局部显示？
那通常不是“没裁”，而是cover压根没生效——它需要明确的容器尺寸作为参照系。如果父容器height是auto或未设置，浏览器会按内容高度缩放，图可能缩成左上角一小块，其余全是背景色。
检查这几项：
立即学习“前端免费学习笔记（深入）”；
- 容器是否设置了
min-height: 100vh（比height: 100vh更安全，防内容撑高后截断） - 是否漏了
background-repeat: no-repeat（否则小图会被重复铺满，和cover冲突） - 是否显式写了
background-position: center center（两个center比单写center更稳，避免部分安卓内核解析偏差） - 是否混用了
background-size: 100% 100%（它优先级更高，会直接覆盖cover）
怎么控制 cover 裁哪一部分？
background-position 是唯一可控杠杆。它不改变缩放，只挪动整张缩放后的图。
- 人物在图上方 → 用
background-position: center top或background-position: 50% 20%（纵向 20% 处对齐容器顶部） - 按钮/CTA 在底部 → 用
background-position: center bottom保脚不切鞋 - 避免用像素值（如
20px 40px），响应式下完全失控；百分比或关键词更稳 - 设计师强调“人脸绝对不能被切” →
cover就不该用，换background-size: contain+background-color填白更稳妥
移动端 cover 失效或跳动，真不是 cover 的锅
iOS Safari 滚动时“拉伸抖动”，大概率是background-attachment: fixed惹的祸——它触发独立图层，干扰cover重绘逻辑。安卓软键盘弹起导致背景“挤压”，本质是布局塌陷，不是背景缩放问题。
真正要做的：
- 删掉
background-attachment: fixed，除非真需要视差效果 - 确保有
<meta name="viewport" content="width=device-width, initial-scale=1"> - 图片源建议 ≥ 2× 容器最大可能尺寸，避免 DPR 导致模糊或错位
- 用
aspect-ratio固定容器比例（如aspect-ratio: 16/9），比靠内容撑高更可靠
cover 本身很稳定，问题总出在参照系、定位和上下文里。盯着图看不如先查容器有没有高、position有没有被父级干扰、background-position是不是还在默认值。
