Bootstrap 5中img标签需显式添加img-fluid类实现响应式缩放，其本质是max-width:100%和height:auto；该类不支持object-fit、懒加载需注意属性顺序、picture内img须单独添加，且不作用于background-image。
img 标签加 img-fluid 类是最简方案
bootstrap 5 默认不给 <img> 做响应式处理，必须显式加类。不加就永远按原始尺寸渲染，小屏溢出是常态。
正确写法就是：
@@##@@
-
img-fluid本质是设置max-width: 100%+height: auto，保证等比缩放不畸变 - 它只作用于直接应用的
<img src="logo.png" class="img-fluid">，不会影响子元素或背景图 - 别手滑写成
img-responsive（那是 Bootstrap 3 的旧名，4/5 已废弃） - 如果图片在
<picture></picture>或<source></source>里，每个<img>都得单独加img-fluid
遇到 object-fit 需求时不能只靠 img-fluid
img-fluid 解决的是“缩放适配容器宽度”，但如果你要“裁剪/居中填充固定宽高区域”（比如卡片头像、封面图），它完全没用。
这时得手动加 CSS：
@@##@@
-
object-fit: cover会等比缩放并裁剪，contain则等比缩放并留白 - 必须同时设
height（或min-height），否则object-fit不生效 - Safari 旧版本对
object-fit支持差，如需兼容 IE，得用 background-image +bg-cover替代
懒加载图片（loading="lazy"）和 img-fluid 兼容但有坑
原生懒加载和 Bootstrap 响应式不冲突，但顺序和属性位置会影响渲染行为。
推荐写法：
@@##@@
- 必须把
loading="lazy"放在class后面，避免某些 SSR 框架解析错序 - 如果图片初始不可见（比如在折叠面板里），
loading="lazy"可能导致首次展开时闪一下——这是浏览器行为，不是 Bootstrap bug - 不要对
<img>同时设width/height属性和img-fluid，前者会覆盖后者的max-width计算
自定义响应断点时，别改 img-fluid 本身
img-fluid 是全局生效的工具类，内部没媒体查询。想让图片在某个屏幕宽度下才开始缩放？别动它。
正确做法是封装新类：
.img-md-fluid { max-width: 100%; height: auto; }<br>@media (min-width: 768px) { .img-md-fluid { max-width: none; } }
- Bootstrap 的响应式工具类（如
d-md-none）是按断点生成的，但img-fluid没做这层设计 - 强行用
img-fluid d-md-inline这类组合，会导致中屏以上图片消失——因为d-md-inline会重置display，但没恢复max-width - 如果项目大量用到不同断点的图片行为，建议用 CSS 自定义属性统一控制，而不是堆砌 class
<picture></picture> 内部的 <img src="avatar.jpg" class="img-fluid" style="max-width:90%"> 没加 img-fluid，或者用了 background-image 却还指望 img-fluid 生效。这两处不报错，但效果完全不对。
