用 background-image 而不是 <img> 标签是最可控方式，因 CSS 背景图可精准控制缩放（cover）、定位（center center）和裁剪，配合 vh-100、p-0/m-0 等 Bootstrap 类实现全屏响应式背景，避免拉伸失真或留白。
用 background-image 而不是 <img> 标签
直接给容器设 background-image 是最可控的方式。Bootstrap 的响应式工具类（如 container-fluid、col）对普通 <img> 标签的尺寸约束很弱，尤其在全宽背景场景下容易拉伸变形或留白。用 CSS 背景图能精准控制缩放、定位和裁剪行为。
常见错误是把图片塞进 <img src="..." class="w-100">，结果在小屏上被强制拉宽、失真，或者在大屏上只占一行高度、上下大片留白。
- 容器必须有明确高度（比如
min-height: 100vh或固定height: 500px），否则背景图不显示 - 推荐用
background-size: cover实现“覆盖整个容器且不拉伸”，而不是contain（会留白）或100% 100%（必拉伸） -
background-position: center center确保居中，比只写center更明确
配合 Bootstrap 的栅格与间距类快速布局
Bootstrap 提供的 container-fluid + row + col 可以快速撑满视口宽度，但要注意：这些类本身不提供高度，所以仍需额外 CSS 控制垂直方向。
典型结构：
<div class="container-fluid p-0">
<div class="row m-0">
<div class="col-12 vh-100" style="background-image: url('bg.jpg'); background-size: cover; background-position: center;">
</div>
</div>
</div>
说明：
-
vh-100是 Bootstrap 5+ 内置的高度类（viewport height 100%），比手写style="height: 100vh"更可靠，且自动适配移动端 Safari 的 viewport bug -
p-0和m-0必须加，否则默认 padding/margin 会导致背景图边缘被遮挡或偏移 - 不要给
col加h-100—— 它依赖父容器高度，而row默认是auto高度，无效
处理 Retina 屏与多分辨率适配
单张背景图在高 DPI 设备上容易模糊。Bootstrap 不管这事，得自己补。
方案很简单：用 background-image 的多值语法，让浏览器选最合适的资源：
background-image: url('bg.jpg'), url('bg@2x.jpg');
但更稳妥的是用 image-set()（现代浏览器支持）：
background-image: image-set(
url('bg.jpg') 1x,
url('bg@2x.jpg') 2x
);
- 务必测试
background-size: cover在不同宽高比设备下的裁剪区域——关键内容（比如人脸）要避开边缘，否则可能被切掉 - 如果用 SVG 作背景，记得加
background-repeat: no-repeat，否则默认平铺 - 避免在
background-image中使用相对路径如../img/bg.jpg，Webpack/Vite 等构建工具常无法正确解析，优先用绝对路径或 public 目录下的路径
兼容性兜底：IE11 及以下怎么办
IE11 不支持 background-size: cover 的部分实现（尤其和 background-position: center 组合时），会出现偏移或缩放异常。
简单有效的兜底方式：
- 加一段条件样式，用
-ms-background-size前缀（IE10+ 支持）：background-size: cover; -ms-background-size: cover; - 更彻底的方案是用
<picture>+<img>模拟背景效果，再用object-fit: cover+position: absolute覆盖容器，但会增加 DOM 复杂度 - 如果项目已放弃 IE 支持，就别浪费时间写前缀——检查你的
browserslist配置是否真实反映目标环境
真正麻烦的不是写法，而是设计师给的图没预留足够裁剪余量，或者运营临时换图却不通知前端——这类问题没法靠 CSS 解决，得提前对齐规范。
