Bootstrap中图片响应式失效的主因是未加img-fluid类，该类通过max-width:100%和height:auto实现等比缩放；若仍撑破容器，需检查父容器宽度、img标签宽高属性及样式冲突。
没加 img-fluid 类是最常见原因
Bootstrap 不会自动让 <img> 适应父容器宽度，这是 HTML 原生行为，不是框架 Bug。图片默认按原始像素渲染，小屏必然溢出容器。
必须显式添加 img-fluid 类——它本质是 max-width: 100% + height: auto，强制等比缩放且不超出父容器。
- 只加在
<img>标签上才生效，加在父<div>上无效 - 对
<picture>内的<img>或 CSS 背景图完全不起作用 - 如果用了行内
width或height（如width="600"），会直接覆盖max-width: 100%，导致缩放失效
img-fluid 加了还是撑破容器？检查这三点
即使加了类，仍可能变形、抖动或撑开，多半是忽略了它的生效前提：
- 父容器必须有明确宽度：比如
<div class="col">可以，但裸<div>没设宽时，max-width: 100%无从计算 - 图片标签上必须显式写
width和height属性（如width="1600" height="900"）：这不是可选项，是防止布局抖动（CLS）的强制要求 - 别和自定义样式冲突：例如
style="width: 200px"、!important覆盖、或外层text-center误用（它对已转为块级的img-fluid无效）
需要固定宽高比（如 16:9）怎么办
img-fluid 只管宽度缩放，不管容器高度塌陷。轮播图、封面图这类场景，得用 ratio 类占位：
- 用
<div class="ratio ratio-16x9">包裹<img>，不能把ratio加在<img>自身上 -
ratio类依赖子元素是块级流内容，所以<img>必须同时带d-block - 若要裁剪居中显示（如封面图），需额外加
style="object-fit: cover; height: 100%;"，且height不可省略
要用背景图替代 <img>？别找 BackgroundImage 类
Bootstrap 5 官方 CSS 中**不存在 BackgroundImage 这个类名**。所谓“响应式背景图”，必须手写 CSS：
- 容器必须设
min-height: 100vh（不是height: 100%，否则在移动端常为空白） - 关键声明缺一不可：
background-size: cover+background-position: center center+background-repeat: no-repeat - 图片源切换靠媒体查询，不是
srcset：@media (min-width: 768px) { .hero-bg { background-image: url('bg-md.jpg'); } } - 别往
.container里塞全屏背景图——它自带max-width和padding，会截断高度；改用.container-fluid或直接挂到<body>
最易被忽略的是：所有比例控制场景下，width 和 height 属性不是“建议写”，而是强制项；而 object-fit、transform 等行为，必须写在 <img> 标签上，不能指望父容器类代劳。
