bootstrap中图片需加img-fluid类实现响应式缩放，配合ratio类维持宽高比，且必须设置width/height属性和svg的viewbox以避免布局抖动与变形。
图片不随屏幕缩放，直接溢出容器
Bootstrap 默认不会自动让 <img> 适应父容器宽度，尤其在响应式布局中，图片可能撑破卡片、模态框或网格列。这不是 Bug，是 HTML 原生行为 —— 图片默认按原始尺寸渲染。
解决方法很简单：给图片加 img-fluid 类。它本质是一组 CSS 规则：max-width: 100% + height: auto，强制等比缩放且不超出父容器。
- 必须用在
<img>标签上，不能只加在父容器上 - 如果父容器本身没设宽（比如
<div class="col">），<code>img-fluid仍有效，因为它是相对于最近的有宽度的祖先计算 - 避免和
width/height行内样式混用，会冲突（例如style="width: 200px"会覆盖max-width: 100%） -
img-fluid仍需保留，否则图片可能溢出或拉伸变形 - 不要给内部
<img src="..." class="img-fluid" alt="...">设height，否则破坏等比逻辑；如需裁剪效果，可额外加object-fit: cover - 注意：Bootstrap 5.3+ 才支持
ratio-4x3、ratio-1x1等预设，旧版本需手动写 CSS
需要固定宽高比（如 16:9 占位），但内容要自适应
单纯 img-fluid 解决不了“容器高度塌陷”问题 —— 比如轮播图、封面图，你希望它始终维持 16:9，同时图片内容能居中裁剪或拉伸适配。
这时候得用 Bootstrap 的 ratio 工具类，配合 <div> 容器包裹图片：
<pre class="brush:php;toolbar:false;"><div class="ratio ratio-16x9">
@@##@@
</div></pre>
<ul>
<li>
<code>ratio 类通过 ::before 伪元素撑开高度，确保容器有固定宽高比，不受图片加载状态影响
图片加载慢导致布局抖动（CLS 问题）
即使用了 img-fluid 和 ratio，如果图片没提前声明尺寸，浏览器首次渲染时不知道该预留多大空间，加载后突然撑开页面，造成布局偏移 —— 这在 Lighthouse 里会扣分。
- 务必在
<img>上写width和height属性（不是 CSS），例如<img> - 这两个属性值应为图片原始分辨率，Bootstrap 会用它们计算缩放比例，不影响响应式表现
- 如果后端返回的是不确定尺寸的图片（如 CMS 上传），至少估算一个典型宽高比，在
ratio容器里 fallback - 现代方案可搭配
loading="lazy"，但别忘了decoding="async"减少主线程阻塞
SVG 或图标字体在响应式场景下糊或错位
img-fluid 对 SVG 有效，但某些 SVG 内联写法（比如用 <svg></svg> 标签直接嵌入）不会自动缩放，还可能因未设 viewBox 导致拉伸变形。
- 内联 SVG 必须带
viewBox属性，例如<svg viewbox="0 0 24 24"></svg>，否则width/height不起作用 - 避免只设
width不设height，否则 SVG 可能高度塌陷 - 图标字体（如 Font Awesome）不用
img-fluid，改用fa-fw或响应式大小类（fa-lg、fa-2x）+font-size媒体查询控制 - 如果 SVG 是背景图（
background-image），那就得靠background-size: contain或cover配合容器ratio
width/height 属性和 viewBox，这两处一缺，图片再怎么套类也救不了布局抖动或 SVG 错位。
