用.img-fluid保证小屏铺满，加.mx-auto.d-block实现大屏居中；需确保父.col有明确宽度且不塌陷、非干扰性flex布局。
图片在 Bootstrap 4/5 中如何响应式居中+铺满？
直接结论：用 .img-fluid 保证小屏铺满，再加 .mx-auto d-block 实现大屏居中 —— 但必须确保父容器（.col）本身不塌陷、不浮动干扰。
为什么 .img-fluid 单独用不管用？
.img-fluid 只负责让图片最大宽度为 100% 且保持宽高比，但它默认是行内元素，不会自动居中；如果父 .col 没有明确宽度或处于 flex 布局下，text-align: center 也无效。
-
.col在.row中默认是 flex item，text-align对子元素中的图片不起作用 - 图片没设
display: block，margin: 0 auto不生效 - Bootstrap 5 的
.col默认flex-basis: 0，可能撑不开，导致图片“挤”在左侧
正确写法（Bootstrap 5 示例）
推荐结构，兼顾语义和兼容性：
<div class="row">
<div class="col-md-8 mx-auto">
<img src="photo.jpg" class="img-fluid mx-auto d-block" alt="描述">
</div>
</div>
关键点说明：
-
.col-md-8提供明确宽度断点，避免小屏下.col过宽导致居中失效 -
.mx-auto在大屏（md+）生效，依赖父容器有可用宽度；小屏下因.col变成 100%，mx-auto失效，靠.img-fluid铺满 -
.d-block必须加，否则mx-auto对行内元素无效 - 不要用
text-center包图片——它在 flex 容器里不可靠
常见坑：Bootstrap 4 和 5 的细微差异
Bootstrap 4 中 .img-fluid 已存在，但 .mx-auto 在 flex 容器中行为更敏感；Bootstrap 5 移除了 .center-block，统一用 mx-auto d-block。
- 如果用了
.row.no-gutters，要确认.col内边距没被清空导致内容贴边 - 图片外层若套了
<a>，记得给链接也加d-block，否则点击区域不对齐 - 某些主题 CSS 可能重置了
img的display，建议显式写d-block避免覆盖
真正麻烦的不是写法，而是父级布局是否“干净”——比如嵌套了多个 .row 或用了自定义 flex 类，会让 mx-auto 失效。遇到居中不生效，先检查上两级容器的 display 和 width。
