直接为 img 添加 mx-auto d-block 和响应式宽度类（如 w-sm-100 w-md-50），即可实现小屏撑满、大屏居中且不拉伸；关键在于控制图片自身行为，而非依赖 col 容器的 text-center 或 justify-content-center。
图片在 Bootstrap 4/5 中如何同时满足大屏居中、小屏撑满？
直接给 img 加 mx-auto d-block + 响应式宽度类，就能同时实现：小屏时宽度 100%，大屏时水平居中且不拉伸。关键不是靠 col 容器“居中”，而是控制图片自身行为。
为什么不能只靠 col 的 text-center 或 justify-content-center？
col 是 flex 容器（Bootstrap 4+ 默认），但图片默认是 inline 元素，text-center 对它生效；可一旦图片设了 width: 100%（比如小屏需要撑满），它就变成块级行为，text-center 失效，反而可能因父容器 padding 导致左右留白。
-
text-center只对 inline/inline-block 元素有效，对display: block无效 -
justify-content-center要求父容器是 flex 且子元素没设width: 100%，否则子项占满整行，居中无意义 - 真正可控的方式是让图片自己成为块级、居中、并响应式缩放
推荐写法：用 img-fluid + mx-auto d-block + 断点宽度控制
Bootstrap 自带的 img-fluid 已含 max-width: 100% 和 height: auto，但默认不居中。补上 mx-auto d-block 即可：
<div class="col"> <img src="logo.png" class="img-fluid mx-auto d-block" alt="logo"> </div>
如果希望图片在小屏（sm）及以下宽度 100%，中屏（md）起固定宽度（如 300px）并居中，可用响应式工具类：
<img src="logo.png"
class="img-fluid mx-auto d-block w-sm-100 w-md-50 w-lg-25"
alt="logo">
-
w-sm-100：≥576px（sm）时宽度 100% -
w-md-50：≥768px（md）时宽度 50%，配合mx-auto居中 -
w-lg-25：≥992px（lg）时宽度 25%，继续居中 - 注意：这些
w-*-*类会覆盖img-fluid的max-width，所以需确保值合理，避免模糊
常见踩坑：图片被父 col 的 padding 挤出边界或错位
Bootstrap 的 col 默认有 padding-left 和 padding-right（通常是 15px），如果图片设了 width: 100%，就会被 padding 挤得左右留白甚至换行。
- 解决方法一：给
col加px-0清除左右 padding - 解决方法二：不依赖
col的宽度，改用container-fluid+row+col布局，但让img直接脱离栅格约束（例如加position-relative或单独包裹div） - 最简方案：放弃让
col控制图片宽度，只用它做布局容器，图片宽度由自身类控制
真正麻烦的不是怎么写，而是忘记图片在不同断点下既是尺寸对象又是布局节点——它既受 CSS 尺寸规则影响，又参与 flex 排列。多数问题出在混用 width、max-width 和 display 行为，而不是类名没写全。
