background-size: cover本身不拉伸变形，而是等比缩放并裁剪以完全覆盖容器；必须配合明确容器高度、background-position: center和background-repeat: no-repeat才能正确生效。
background-size: cover 是裁剪限制的起点，不是可选项
直接写 background-size: cover 才能触发浏览器原生的等比缩放 + 自动裁剪逻辑。它会让图片宽或高至少一边撑满容器，另一边溢出并被截断——这是 CSS 渲染层行为，不依赖 JS 或 Bootstrap 类。
常见误用：background-size: 100% 100% 强制拉伸变形；background-size: contain 保全图但留白；二者都不满足“限制显示区域”的需求。
-
cover的裁剪锚点默认是左上角，所以必须配background-position: center center，否则人脸、Logo 等关键内容大概率被切掉 - 如果原始图宽高比和屏幕差距极大（如横幅图在手机竖屏），上下裁得多是正常现象，不是 bug
- 别指望
cover保证“所有内容都可见”——它只保证“完全覆盖容器”
容器必须有明确高度，否则裁剪无从谈起
.container-fluid、.row 这类 Bootstrap 布局类本身不设高度，完全依赖内容撑开。空内容时高度几乎为 0，背景图根本没地方渲染，更谈不上裁剪。
正确做法是套一层自定义容器，例如：
<div class="hero-bg"> <div class="container-fluid"></div> </div>
- 在
.hero-bg上设置min-height: 100vh（推荐）或height: 100vh，min-height更安全，避免内容超长时底部被截 - 避免直接在
.container上写背景样式——它带max-width和左右padding，视觉上只是窄条，不是全屏裁剪区 - 若用
.container-fluid，记得加px-0 py-0清除默认内边距，否则边缘留白
background-position 控制“裁哪一块”，但需配合 size 才生效
background-position 不是“对齐容器”，而是“定位图片上的某个点对齐容器的某个点”。单独写 background-position: center 几乎总是无效，因为没 cover 时图片按原始尺寸铺，居中没意义。
真正可控的组合是：background-size: cover 先放大裁切，再用 background-position 微调可视焦点：
-
background-position: center top—— 把图片顶部居中“捞”进画面，适合保留人脸 -
background-position: center bottom—— 适合保留底部标语或按钮区域 - 移动端优先用关键词（
top left）而非百分比（20% 30%），Safari 对百分比解析偶有偏差 - 别用
background-attachment: fixed—— iOS 有已知渲染 bug，滚动时背景可能消失或错位
真机调试时，90% 的“裁切错位”其实是布局链断裂
手机端看到背景图“被切掉”，第一反应不该是调 background-position，而应检查 computed styles：
-
body或根容器漏了min-height: 100vh，内容少时容器塌陷，背景无处可铺 - 父容器意外带
overflow: hidden，把背景图直接截断 - 图片路径 404，浏览器静默降级为纯色背景，你以为是裁切问题，实际图根本没加载出来
- 用了
border-radius但没加background-origin: border-box，圆角区域背景从 content-box 起算，视觉上像被切了一角
复杂点在于：裁剪效果是多个条件共同作用的结果，任何一个环节失效（高度、尺寸、定位、路径），都会让整个控制逻辑崩掉。最容易被忽略的是容器高度和图片加载状态——它们不出错时，cover 和 center center 就能稳稳工作。
