img-fluid 对 background-image 无效，因其仅作用于 标签；背景图响应式需手动设置 background-size、background-position 和非零容器高度三要素。
img-fluid 为什么对 background-image 完全没作用
因为 img-fluid 是专为 <img alt="为什么Bootstrap图片响应式img-fluid在背景图无效" > 标签设计的 CSS 类，它的样式规则（max-width: 100%、height: auto）只在 HTML 图片元素上生效；而 background-image 是 CSS 属性，作用于任意块级容器，不解析 HTML 标签结构，自然无视 img-fluid。
background-image 响应式必须手动控制哪些关键 CSS 属性
背景图要真正响应式，不能依赖 Bootstrap 工具类“自动适配”，必须显式设置三要素：
-
background-size: cover或contain—— 不要用100% 100%，否则必拉伸变形 -
background-position: center center—— 比单写center更明确，避免 Safari 渲染偏移 - 容器必须有**非零高度**：比如
min-height: 100vh、height: 500px，或用vh-100（Bootstrap 5+ 内置类）
漏掉任一条件，背景图就可能看不见、居不中、或在小屏上只剩一条线。
常见错误：误把 img-fluid 当成“万能响应式开关”
开发者常犯的典型误操作：
- 给
<div style="background-image: url(...)"></div>加class="img-fluid"—— 完全无效，类名被忽略 - 只写
background-size: cover，但父容器没设高度，结果div高度为 0，图根本渲染不出来 - 用
<img src="..." class="img-fluid w-100" alt="为什么Bootstrap图片响应式img-fluid在背景图无效" >代替背景图，却没加position: absolute和父容器position: relative，导致布局错乱 - 以为
img-fluid能解决高分屏模糊 —— 它不管设备像素比（DPR），background-image模糊必须靠image-set()或媒体查询切换@2x图
真正有效的背景图响应式组合方案
推荐直接使用 Bootstrap 5+ 提供的语义化类 + 必要内联样式：
<div class="container-fluid p-0">
<div class="row m-0">
<div class="col-12 vh-100"
style="background-image: image-set(url('bg.jpg') 1x, url('bg@2x.jpg') 2x);
background-size: cover;
background-position: center center;">
</div>
</div>
</div>
注意：p-0 和 m-0 必须加，否则默认间距会遮挡边缘；vh-100 比手写 height: 100vh 更可靠，尤其在移动端 Safari 中能绕过 viewport 高度 bug。
最易被忽略的是：背景图的“响应式”不来自类名，而来自你是否亲手控制了尺寸、定位和容器高度——这三者缺一不可，且无法由 img-fluid 代劳。
