bootstrap 不自动缩放图片，需手动添加 img-fluid 类并配合 width/height 属性、viewbox（svg）及 object-fit 等才能实现真正响应式，否则手机端易溢出、抖动或变形。
Bootstrap 本身不自动缩放图片 —— 它只提供 img-fluid 这个类来「让图片响应式」，但必须你主动加，且加得对，否则手机端照样溢出、拉伸、抖动。
为什么手机端图片不缩放？根本原因不是 Bootstrap 没做，而是你没用 img-fluid
HTML 原生 <img> 标签默认按原始尺寸渲染，和父容器宽度无关。Bootstrap 并没有重写这个行为，而是靠 img-fluid 类注入两条关键 CSS：
-
display: block：消除行内元素默认的基线对齐空白 -
max-width: 100%+height: auto：强制等比缩放，不超出父容器
常见错误：
- 只给父
<div> 加 <code>col-6，却忘了在<img>上加img-fluid - 同时写了
style="width: 300px"行内样式，直接覆盖max-width: 100% - 用在 Markdown 渲染后的
<img>上，但没通过 JS 补全类：$(".content img").addClass("img-fluid")
img-fluid 必须配合 width 和 height 属性才能防布局抖动（CLS）
即使加了 img-fluid，如果图片没声明原始尺寸，浏览器首次渲染时无法预留空间，加载后突然撑开页面，Lighthouse 会报「累积布局偏移」（CLS）问题。
正确写法是显式写 HTML 属性（不是 CSS）：
@@##@@
注意：
- 这两个值应为图片真实分辨率，Bootstrap 不会用它们“固定大小”，而是用于计算缩放比例
- 后端返回尺寸不确定？至少估算一个典型宽高比（如 4:3），再套
ratio ratio-4x3容器兜底 - SVG 必须带
viewBox，否则img-fluid无效，例如：<svg viewbox="0 0 24 24"></svg>
移动端图片裁剪/居中适配：别只靠 img-fluid，要加 object-fit
img-fluid 只解决「不溢出」，不解决「怎么填满」。比如轮播图封面、头像缩略图，常需要居中裁剪而非拉伸变形。
方案是组合使用：
- 外层容器加
ratio ratio-16x9（Bootstrap 5.3+）或手动设aspect-ratio: 16/9 - 内部
<img src="photo.jpg" style="max-width:90%" style="max-width:90%" class="img-fluid">保留img-fluid，再加style="object-fit: cover" - 绝对不要给
<img>设height，否则破坏等比逻辑
示例：
<div class="ratio ratio-16x9"> @@##@@ </div>
优缺点很现实：轻量但有硬约束，灵活但容易漏细节
img-fluid 的优势是零 JS、纯 CSS、体积小、兼容性好（IE11+）。但它不是万能胶：
- 不处理图片加载失败 —— 得自己加
onerror或 fallback 占位符 - 不控制懒加载时机 —— 要用
loading="lazy"，但记得补decoding="async"减主线程压力 - 不替代语义 —— 纯装饰图建议用 CSS background-image，
<img>应承载内容信息
最常被忽略的一点：所有这些规则都只作用于 <img src="cover.jpg" style="max-width:90%" style="max-width:90%" class="img-fluid" style="object-fit: cover"> 元素本身。如果你用的是 <picture></picture>、<svg></svg> 或背景图，img-fluid 完全无效，得另写规则。
