background-size: cover 是实现等比缩放与自动裁剪的核心，需配合 background-position: center center 使用，容器高度应设为 min-height: 100vh，避免误用 contain 或 100% 100%，移动端慎用 fixed。
background-size: cover 是裁剪控制的核心，不是可选项
直接写 background-size: cover 才能触发等比缩放 + 自动裁剪。它会让图片宽高至少有一边撑满容器，另一边溢出并被自然裁剪——这是浏览器原生行为，无需 js 或额外库。
常见错误是误用 background-size: 100% 100%（强制拉伸变形）或 background-size: contain（留白不裁剪），结果既没“全屏”，也没“聚焦主体”。
-
cover的裁剪起点默认是左上角，所以必须配background-position: center center，否则人像、Logo 等关键内容容易被切掉 - 如果图片原始宽高比和屏幕差距极大（比如超宽横幅图在手机竖屏上），即使用了
cover和center center，上下也可能裁得过多——这时需换图，或用媒体查询微调background-position，例如手机端改用center top -
cover不保证“显示全部内容”，它只保证“完全覆盖容器”。这是设计意图，不是 bug
容器高度必须显式设为 100vh，不能依赖百分比
给 <body> 或某个 <div> 加背景图，但图片只显示一小块？大概率是容器高度为 0。Bootstrap 的 .container、.row 默认不占满视口，height: 100% 在没设 html, body { height: 100%; } 时也无效。
最稳解法：直接用视口单位。
- 对全屏背景容器，写
min-height: 100vh（推荐）或height: 100vh；min-height更安全，避免内容超长时底部被截 - 别把背景图加在
<div class="container">上——它有max-width和左右padding，cover 会拉伸但视觉仍是“中间窄条” - 若用
.container-fluid，记得加px-0 py-0清除默认内边距，否则边缘留白
移动端慎用 background-attachment: fixed
加了 background-attachment: fixed 想做视差效果，结果 iOS Safari 里背景撕裂、安卓滚动卡顿？这不是 Bootstrap 问题，是该属性在移动端兼容性差且性能低。
- 绝大多数场景下，去掉
fixed，只用cover + center center就足够实现稳定裁剪 - 真需要视差，优先考虑 JS 方案（如
scrollama）或用transform: translateY()配合滚动监听，更可控 - 如果坚持用
fixed，务必加background-color作降级色，防止图片加载失败时大面积空白
图片路径和加载时机影响裁剪是否可见
背景图明明写了 cover，却看到白底或错位？可能根本没加载出来。
- 检查路径是否正确，尤其构建后静态资源路径常变（如
/static/hero.jpgvs./img/hero.jpg） - 避免在 CSS 中用相对路径（如
url(../img/bg.jpg)）而没确认文件结构层级 - 不要依赖
background-image的加载完成事件——它没有原生回调。若需确保裁剪区域稳定，可用loading="lazy"配合img标签 +object-fit: cover替代（适合内容区图片）
真正难的不是写对那几行 CSS，而是意识到：裁剪是否合理，取决于图片原始比例、容器尺寸、以及你是否愿意为不同设备微调 background-position。cover 只负责“怎么裁”，不替你决定“裁哪里”。
