直接结论：大屏（≥992px）下图片水平居中且不撑满列宽，小屏（
用 img-fluid + mx-auto 组合实现响应式居中与宽度控制
直接结论：大屏（≥992px）下图片水平居中且不撑满列宽，小屏（.col 容器 —— 关键不是靠媒体查询手写 css，而是复用 bootstrap 内置类组合。
常见错误是只加 img-fluid，结果小屏虽占满，大屏却左对齐；或者加 mx-auto d-block 后大屏居中了，但小屏也留白，没占满。
-
img-fluid必须加：它设max-width: 100%和height: auto，保证图片不溢出容器、保持比例 -
d-block必须加：让margin-left/margin-right: auto生效（inline 元素的 margin 不生效） -
mx-auto在大屏生效，但在小屏会被img-fluid的宽度行为覆盖 —— 这正是我们需要的“自动切换”逻辑 - 不要给图片设固定
width或max-width，否则会破坏响应行为
为什么不能只用 text-center？
text-center 是对 inline 元素起作用的文本对齐类，而图片默认是 inline 元素，但它在父容器中会因换行、空格产生不可控间隙，且无法真正“居中块级区域”。更严重的是：text-center 对 img-fluid 无效 —— 因为 img-fluid 已将图片转为块级表现（靠 display: block），此时文本对齐不再影响它。
实操验证：即使父容器加了 text-center，图片在大屏仍靠左；只有显式加 d-block mx-auto 才能触发块级居中。
- 错误写法：
- 正确写法：
- 如果需要小屏也居中（而非占满），才考虑用
text-center配合img-fluid，但不符合你的需求
遇到 col 宽度太窄导致图片被压缩怎么办？
Bootstrap 的 .col 默认是 flex 子项，最小宽度由内容决定。如果图片原始尺寸小（比如 100×100px），img-fluid 会让它最大撑到父容器宽，但若父 .col 自身很窄（如 col-6 在小屏下仅约 50vw），图片就会被强制缩放失真。
这不是样式问题，是布局约束问题。解决方向不是改图片类，而是调整列结构：
- 确认是否真需要
col：如果只是单图展示，用container+mx-auto更稳妥 - 避免嵌套过深：比如
col-12 col-md-6 col-lg-4在小屏仍是全宽，但图片可能被压缩 —— 此时应删掉col-md-6等中间断点，让小屏自然占满 - 必要时用
min-width限定图片最小显示尺寸：style="min-width: 200px"，但会破坏流式特性，慎用
自定义断点时 mx-auto 还生效吗？
生效，但要注意：Bootstrap 的 mx-auto 是全局类，不绑定断点。它的效果取决于图片是否为块级元素、是否有足够空间容纳其自然宽度。
如果你用了非标准断点（比如新增 col-xl2），只要该列在对应屏幕宽度下有足够宽度（大于图片自然宽），mx-auto 就会让图片居中；如果列宽小于图片自然宽，img-fluid 会先把它缩放到列宽，再居中 —— 这时你看到的“居中”其实是缩放后的居中，不是原始尺寸居中。
真正影响行为的是容器宽度和图片 intrinsic width 的关系，不是类名本身。
复杂点在于：图片加载前浏览器不知道 intrinsic width，可能导致布局抖动；容易被忽略的是父容器有没有设置 overflow: hidden 或 flex-shrink: 0，这些会干扰 mx-auto 的计算。
