img-fluid、d-block、mx-auto三者必须同时使用才能实现“小屏铺满、大屏居中”：img-fluid确保等比缩放且不溢出，d-block使图片变为块级元素，mx-auto在有明确宽度的父容器中触发水平居中。
img-fluid + d-block + mx-auto 三者必须同时存在
单独用 img-fluid 只能保证小屏不溢出、等比缩放，但图片仍是 inline 元素，margin: auto 对它无效；只加 mx-auto d-block 而没 img-fluid，大屏可能居中，但小屏会原尺寸显示甚至横向溢出。三者是绑定生效的组合：
-
img-fluid提供max-width: 100%和height: auto，约束宽度上限、保持比例 -
d-block把图片转成块级元素，让margin-left: auto; margin-right: auto生效 -
mx-auto在父容器有明确宽度时触发水平居中；小屏下因img-fluid已撑满父容器，mx-auto实际不产生留白——这正是“小屏铺满、大屏居中”的自动切换逻辑
父容器 .col 必须有明确宽度上下文
如果 .col 没指定断点类（比如只写 col），在 Bootstrap 5 中它默认是 flex: 1 1 0，最小宽度由内容决定，mx-auto 就没参考基准，居中失效。常见写法：
- 小屏铺满 → 用
col-12或至少col-sm-12（确保 xs/sm 下占满） - 大屏居中 → 叠加
col-md-6、col-lg-4等，让父容器在对应断点下有固定占比宽度 - 避免只写
col-lg-4：小屏下该列宽度退化为auto，图片跟着变窄，无法铺满
别用 text-center 替代 mx-auto d-block
text-center 是针对 inline 元素的文本对齐，而 img-fluid 已隐式设了 display: block（Bootstrap 5 的实现），此时 text-align 对图片完全无效。实测：
- 错误：
<div class="col text-center"><img class="img-fluid"></div>→ 大屏仍靠左 - 正确：
<div class="col"><img class="img-fluid d-block mx-auto"></div> - 额外套一层
<div class="text-center">也不行：它只影响其子元素中的 inline 内容，对已为 block 的图片无作用
检查内联 width/height 和嵌套干扰
最容易被忽略的破坏点不是类名漏写，而是 DOM 层级或属性冲突：
- 图片标签带
width="200"或height="100"属性 → 直接覆盖img-fluid的max-width: 100%，小屏无法响应式缩放 - 父
.col外层没包.row，或.row被设了justify-content-center→ 干扰mx-auto的 margin 计算逻辑 - 在
.col里又套了.container或额外<div>→ 多了一层宽度约束，导致实际可用宽度变小，图片撑不满或居中偏移
验证时临时加 style="border: 1px solid red" 到 .col 上，一眼看出它是否真按预期宽度渲染。
