background-size: cover 是实现等比缩放+居中裁剪的核心，需配合 background-position: center center 和 min-height: 100vh 使用；误用 100% 100% 或 contain 会导致变形或留白，容器无高度或 overflow: hidden 会使其失效。
直接用 background-size: cover 配合 background-position: center center，再给容器设 min-height: 100vh，就能实现等比缩放 + 居中裁剪 —— 其他写法要么变形、要么留白、要么根本没效果。
为什么 background-size: cover 是裁剪控制的核心
background-size: cover 不是“可选项”，它是浏览器原生行为：等比缩放图片，让宽或高至少一边撑满容器，另一边溢出并被自动裁剪。它不依赖 JS，也不靠 Bootstrap 类，但必须和 background-position: center center 组合才有效——否则默认锚点在左上角，人脸、Logo 很容易被切掉。
- 误用
background-size: 100% 100%→ 强制拉伸，人像变宽、文字糊成色块 - 误用
background-size: contain→ 全图可见但必然留白，不满足“裁剪”需求 - 只写
background-position: center却漏了cover→ 图片按原始尺寸铺，center 完全无效
容器高度为 0 是最常被忽略的失效原因
Bootstrap 的 .container、.container-fluid、.row 默认不设高度，完全靠内容撑开。如果背景图加在这些类上，而页面内容少（比如只有标题），容器高度就是 0，背景图压根没地方渲染。
- 别直接在
.container-fluid上写背景样式；应套一层自定义容器：<div class="bg-cover"><div class="container-fluid"></div></div> - 在
.bg-cover中必须设min-height: 100vh（推荐）或height: 100vh；min-height更安全，避免内容超长时底部被截 - 若用
.container-fluid，记得加px-0 py-0清除默认内边距，否则左右/上下留白
移动端裁剪错位的真实原因往往不是 background-position
真机调试时发现背景图“看起来被切掉”，优先检查 computed styles 而不是反复调 background-position：
-
body或根容器漏了min-height: 100vh→ 内容少时容器塌陷，背景无处可铺 - 用了
background-attachment: fixed→ iOS Safari 有已知渲染 bug，滚动时背景可能消失或错位 - 图片路径 404 → 浏览器静默降级为纯色背景，你以为是裁切问题，实际图根本没加载出来
- 容器带
border-radius但没加background-origin: border-box→ 圆角区域背景从 content-box 起算，视觉上像被切了一角
局部显示需要放弃 cover/contain，手动控制 background-size 和 position
如果目标不是“全图覆盖”，而是“只显示某一块”，就得放弃 cover 和 contain，改用精确控制：
- 用
background-size: auto保持原图尺寸，再配background-position: 20% 30%把想要的部分“推”进可视区 - 想固定宽高框内只露左半边？用
background-size: 200% 100%+background-position: 0 0，再靠容器overflow: hidden截掉右边 - 务必确保目标元素有明确高度（如
min-height: 400px），否则空内容时背景根本不会渲染 - 所有裁剪效果的前提是：容器不能有意外的
overflow: hidden，且图片路径必须有效
真正难的不是写对那几行 CSS，而是判断当前场景到底要“保焦点”还是“保全图”——cover 保证铺满，但不保证内容完整；contain 保证完整，但不保证铺满。选错就等于方向错了，再调 position 也没用。
