必须为标签添加img-fluid类并显式设置width和height属性，否则小屏溢出、缩放失效或布局抖动；img-fluid依赖max-width:100%和height:auto，受行内宽高、父容器无宽、嵌套等限制，需配合ratio类占位及object-fit控制显示效果。
必须加 img-fluid 类，不加就按原始像素渲染，小屏必然溢出。
为什么只加 img-fluid 还是变形或撑破容器
常见错误是忽略了它的生效前提和冲突点：
-
img-fluid依赖max-width: 100%和height: auto，一旦你在<img>上写了行内width或height（比如width="600"），就会覆盖max-width: 100%，导致缩放失效 - 它只作用于直接添加的
<img>标签，对<picture></picture>内的<img>或背景图完全无效——后者得用background-size: contain/cover - 如果父容器本身没宽度（比如
<div> 没设 class 或 width），<code>max-width: 100%就无从计算，图片可能塌缩或错位img-fluid配合ratio类维持宽高比仅用
img-fluid时，图片加载前容器高度为 0，加载后突然撑开，引发布局抖动（CLS）。解决办法是用ratio类占位：- 用
<div class="ratio ratio-16x9"><img src="..." class="img-fluid"></div>包裹图片 -
<img>标签上必须显式写width和height属性（如width="1600" style="max-width:90%"），值应为原始分辨率，不能省略 - 别把
ratio加在<img>上——它只对容器生效，且要求子元素是块级流内容
需要裁剪或居中显示时，
img-fluid不够用img-fluid只管“等比缩放到容器宽度”，不管“怎么塞进固定区域”。要实现封面图、头像这类效果，得叠加 CSS：- 填满并裁剪：
style="object-fit: cover; height: 200px;"—— 必须设height（或min-height），否则object-fit不触发 - 完整显示并留白：
style="object-fit: contain; background-color: #f8f9fa;"—— 配合底色防白边 - IE 或旧 Safari 不支持
object-fit？改用background-image+background-size方案，但会失去alt文本和语义
最易被忽略的是：所有涉及比例控制的场景，
width和height属性不是可选项，而是强制项；而所有自定义样式（尤其是object-fit）都必须写在<img>标签上，不能只靠父容器类驱动。 - 用
