background-size: contain 在 Bootstrap 5 中完全可用，其作用是完整显示整张图不裁剪，因此当容器与图片宽高比不一致时必然留白；需配合 background-position: center center 和 background-repeat: no-repeat 使用，并避免用于全屏 Hero 图。
background-size: contain 在 Bootstrap 5 中完全可用，但它不是“设置成 contain”，而是你主动选择用 contain 替代 cover——两者行为根本不同，不能混用或切换开关。
为什么 background-size: contain 看起来没填满屏幕
这是正常现象。contain 的语义是“完整显示整张图，不裁剪”，所以当容器宽高比与图片不一致时，必然留白。常见错误是误以为它该“铺满”，结果发现顶部/底部/左右有大片空白，甚至只显示一小块图。
- 留白位置取决于
background-position：默认是top left，所以图常贴左上角；加background-position: center center可让图居中，但空白仍在 - 如果容器高度由内容撑开（如
.container），contain只会按内容区尺寸缩放，视觉上更显小 -
contain不受min-height: 100vh“驱动”——它只响应容器当前渲染尺寸，不会主动拉伸去填
什么时候该用 contain 而不是 cover
仅在明确需要「完整保留图片所有像素」时才选 contain，比如：
- Logo、图标、示意图等信息敏感型图像，裁剪会导致关键内容丢失
- 多图并列对比场景，需保持各图原始比例一致
- 打印样式表（
@media print）中避免裁剪，确保可读性 - 不推荐用于全屏 Hero 图——留白破坏视觉重量，用户第一眼看不到重点
contain 配合 Bootstrap 容器的实操要点
直接给 .row 或 .container 加 background-size: contain 很容易失效，因为这些类自带 max-width 和 padding，导致容器实际渲染宽度远小于视口。
- 必须用独立容器：
<div class="hero-contain">，不套.container，或改用.container-fluid - 显式设宽高控制范围：例如
width: 100%; max-width: 1200px; height: 400px;，否则contain缩放基准不可控 - 路径和加载状态要处理：
background-color: #f8f9fa防白屏，background-repeat: no-repeat必须写，尽管contain默认不平铺 - 移动端慎用：小屏下图片可能缩得太小，文字盖上去后识别困难；可搭配媒体查询降级为
cover或隐藏背景图
代码里别漏这三行
只写 background-size: contain 是不够的，至少补全以下声明：
background-size: contain; background-position: center center; background-repeat: no-repeat;
漏掉 background-position 会让图偏左上；漏掉 background-repeat 在旧版 Safari 下偶发平铺；contain 本身不控制定位，这点和 cover 一样。
最易被忽略的是：用了 contain 就别再指望“全屏覆盖”——它天生拒绝填满，留白是功能，不是 bug。
