background-size: cover 是唯一可靠选项，因其让图片等比缩放并至少一边撑满容器、另一边自然裁剪，配合显式高度和 background-position: center center 实现“铺满裁剪”，而 100% 100% 会拉伸、contain 必留白。
必须用 background-size: cover 配合显式容器高度和 background-position: center center，其他写法（如 100% 100% 或 contain）都不满足“等比缩放 + 自动裁剪”需求。
为什么 background-size: cover 是唯一可靠选项
它让图片等比缩放，宽或高至少有一边完全撑满容器，另一边自然溢出并被裁剪——这是浏览器原生行为，不依赖 JS 或 Bootstrap 类。误用 background-size: 100% 100% 会强制拉伸变形；contain 则必然留白，无法实现“铺满裁剪”效果。
-
cover的裁剪锚点默认是左上角，所以必须配background-position: center center，否则人脸、Logo 等关键内容容易被切掉 - 原始图宽高比与屏幕差距极大时（比如超宽横幅图在手机竖屏上），上下裁得多是正常现象，不是 bug
- IE ≤10 不支持
cover，需用filter: progid:DXImageTransform.Microsoft.AlphaImageLoader回退（仅限内网兼容场景）
容器高度必须显式设置，不能靠百分比或内容撑开
Bootstrap 的 .container、.row、.col 默认不设高度，完全依赖内容撑开。背景图要裁剪，就得有个“有边界的框”。
- 推荐用
min-height: 100vh（比height: 100vh更安全，避免内容超长时底部被截） - 若设在
<body>上，记得加html, body { height: 100%; }，否则高度塌陷 - 别直接给
.container-fluid加背景图——它有max-width和左右padding，视觉上仍是“中间窄条”；应套一层自定义容器，如<div class="bg-cover"><div class="container-fluid"></div></div>
移动端和 Safari 的真实坑点
真机调试时背景图“看起来被切掉”，大概率不是参数问题，而是布局链断裂。
- 优先检查 computed styles：确认
background-image是否生效、容器height是否为100vh、父容器是否意外带overflow: hidden -
background-attachment: fixed在 iOS 15+ 有已知渲染 bug，滚动时背景可能消失或错位，慎用 - Safari 中若父容器未设
overflow: hidden，偶尔可见裁剪边缘溢出，建议显式加overflow-hidden - 图片路径 404 后浏览器静默降级为纯色背景，你以为是裁切问题，实际图根本没加载出来
别试图用 Bootstrap 类“凑”裁剪逻辑
Bootstrap 的 bg-* 类（如 bg-center）只控制背景色，对背景图无效；bg-cover 不存在，也别指望 bg-top 能设 background-position: top。
- 真正要调裁剪区域，躲不开写一行
background-position: left top或background-position: 20% 30% - 如果要用 class 复用，写轻量级规则，例如
.bg-pos-top-left { background-position: left top !important; }，注意加!important防止被其他样式覆盖 - 移动端 Safari 对百分比解析偶有偏差，建议优先用关键词（
top left）或像素偏移（10px 20px）
真正卡住人的往往不是 cover 写得对不对，而是容器高度没撑起来、图片路径错了、或者 Safari 悄悄把 fixed 背景吃掉了。
