要用background-size和background-position控制背景图缩放与对齐，需组合使用cover/contain/auto配合center center等定位值，Bootstrap不提供专用工具类，必须手动写CSS。
background-image 怎么用 CSS 控制图片缩放和对齐
Bootstrap 本身不提供专用的背景图比例/对齐工具类，得靠原生 CSS 的 background-size 和 background-position 控制。直接在 class 里写内联样式或自定义 CSS 才可靠，别指望 img-fluid 或 bg-* 类能管背景图。
-
background-size: cover—— 图片等比缩放填满容器，可能裁剪边缘（最常用） -
background-size: contain—— 图片等比缩放完整显示，留白不可避免 -
background-size: 100% 100%—— 拉伸变形，慎用 -
background-position: center center—— 居中对齐（默认值，但显式写更稳妥） -
background-position: top left/bottom right等 —— 指定锚点，配合cover裁剪时控制保留哪部分
Bootstrap 5 里怎么快速加背景图并控制比例
Bootstrap 5 没内置背景图工具类，但可以组合使用容器类 + 自定义 CSS。推荐在 <div> 上用 bg-dark（占位）、position-relative（方便子元素定位），再通过 style 或 class 注入背景规则：
<div class="position-relative vh-100"
style="background-image: url('hero.jpg');
background-size: cover;
background-position: center;">
</div>注意：如果用 SCSS，建议抽成自定义 class，比如 .bg-cover-center，避免大量重复 style；另外 vh-100 是高度控制，不是背景行为本身。
为什么 background-size: cover 在移动端常“切掉人脸”
因为 cover 优先保证填满，而不同屏幕宽高比差异大（比如 iPhone 竖屏 vs iPad 横屏），图片中心对齐时，顶部/底部容易被裁。解决方法不是换属性，而是换策略：
- 用
background-position: center top把关键内容（如人脸）“钉”在顶部可见区 - 给图片预留安全边距：原始图上下多留 20% 空间，避免重要内容紧贴边缘
- 响应式断点切换
background-position：@media (max-width: 768px) { .hero { background-position: center 20%; } } - 慎用
object-fit—— 它只对<img>标签生效，对background-image无效
background-image 和 <img> 标签选哪个更可控
要精确控制缩放、对齐、模糊、叠加文字，<img> + object-fit 更灵活；但要做半透明遮罩、渐变叠加、伪元素装饰，background-image 更方便。两者不能混用同一个语义目标：
- 用
<img>：支持object-fit: cover+object-position: center，还能设loading="lazy"、alt，SEO 友好 - 用
background-image：可叠加多个图层（background-image: url(a.jpg), url(b.png)），支持background-blend-mode，适合装饰性场景 - 常见翻车点：给
<img>加width: 100%但忘了设height: auto，导致比例错乱；或给background-image容器设了height: 0却没用padding-top维持宽高比
真正麻烦的不是语法，是设计阶段没想清楚——这张图到底是内容还是装饰？决定了后续所有技术选型和适配成本。
