结论：必须组合控制父容器宽度、图片自身行为和断点适配，仅用img-fluid或mx-auto无法实现；大屏靠col-lg-6+mx-auto居中，小屏靠col-12铺满，img-fluid确保等比缩放。
图片在 Bootstrap col 中响应式居中+全宽切换的实现逻辑
直接说结论：不能只靠 img-fluid 或 mx-auto 一类单一类名解决，必须组合控制父容器宽度、图片自身行为和断点适配。核心矛盾在于「大屏居中」需要固定宽度+水平居中，而「小屏铺满」要求宽度 100% 且无外边距——这两者在同一个 img 元素上需用不同断点触发不同样式。
col 容器本身不决定图片宽度，要主动干预
很多人误以为把 img 放进 col-6 就自动居中，其实 col 只是网格列，它默认是块级、宽度由栅格系统计算（如 col-6 在 lg+ 是 50%），但 img 默认是 inline 元素，会受父容器行内流影响，容易出现底部留白或对齐偏移。
- 必须给
img加display: block（Bootstrap 5 的img-fluid已含此声明，但旧版需手动加） - 大屏居中依赖
mx-auto，但它只在display: block且宽度小于父容器时生效；若父col宽度是 100%，mx-auto就无效 - 所以真正可控的是：让大屏下
col变窄（如col-lg-6），再配合img-fluid mx-auto；小屏则用col-12拉满宽度
推荐写法：用断点类组合控制容器 + 图片行为
这是最稳妥、无需额外 CSS 的方式，兼容 Bootstrap 4/5：
<div class="row">
<div class="col-12 col-lg-6 mx-auto">
<img src="photo.jpg" class="img-fluid" alt="...">
</div>
</div>说明：
-
col-12：所有屏幕下该列占满一行宽度 → 小屏图片自然铺满 -
col-lg-6：lg 及以上变为 6 列宽（约 50%），配合mx-auto居中整个列容器 -
img-fluid：保证图片在各自父容器内等比缩放，不溢出 - 不需要给
img单独加mx-auto，因为列已居中，图片又width: 100%，自然居中
常见踩坑点
这些细节不注意，效果就出不来：
- 忘记给
img加img-fluid→ 小屏图片可能横向溢出或失真 - 只写
col-lg-6 mx-auto，没写col-12→ 小屏下该列宽度由默认断点决定（如 Bootstrap 5 中未指定col-*时为 auto，不占满） - 在
col内又套一层container或row→ 多余嵌套会干扰宽度计算，尤其小屏易出现左右边距 - 用
text-center试图居中图片 → 对 block 元素无效，且小屏下无法撤掉居中，反而导致铺不满
真正的关键不是图片自己怎么动，而是你让它的父容器在什么断点下多宽、是否居中——图片只是被动适应。
