直接加 img-fluid 无法填满或等比是因为它仅设 max-width:100% 和 height:auto，不约束容器高度；必须用 ratio 类包裹 img 并配合 object-fit:cover 才能实现等比填满。
直接加 img-fluid 为什么填不满也不等比？
img-fluid 只设 max-width: 100% 和 height: auto，它让图片宽度随列宽缩放，但高度完全由原始宽高比决定。一张 4:3 的图和一张 1:1 的图塞进同一个 .col-md-4 里，高度必然不同——网格行高不一致，卡片错位、悬停层飘移、hover 动画对不齐，全是因为容器没约束高度。
必须用 ratio 类包裹，而不是直接加在 img 上
ratio 是 Bootstrap 5.3+ 的比例控制核心，靠 aspect-ratio（现代浏览器）或伪元素 ::before + padding-top（降级）实现响应式占位。但它只定义宽高关系，不落地尺寸。
- 写法必须是：
<div class="ratio ratio-1x1"><img src="..." class="img-fluid"></div>，不能省略img-fluid，也不能把ratio-1x1加到<img>标签上 -
ratio容器需有明确宽度来源：要么父级是.col-*（如.col-lg-3），要么自己设style="width: 300px;" - 别指望
ratio自己撑出高度——它只建“正方形画布”，图片还得靠object-fit填满
object-fit: cover 才是填满且不变形的关键
仅靠 ratio-1x1 + img-fluid，图片仍可能居中留白。必须让 <img> 自身适配这个画布：
- 给
<img>加class="w-100 h-100"，并内联style="max-width:90%"（或全局定义.cover-img { object-fit: cover; }） - 绝对不要给
<img>设height、max-height或vertical-align—— 这些会干扰object-fit行为 - 如果不想裁剪，改用
object-fit: contain，但要配合背景色防留白，比如style="background: #f8f9fa;"
混排不同比例图片时的现实取舍
业务里很少能保证所有图源都是统一比例。这时候得判断优先级：
- 若强调视觉整齐（如商品列表、作品集），强制统一比例：用
ratio-4x3或ratio-16x9，搭配object-fit: cover裁剪 - 若内容完整性更重要（如证件照、文档扫描件），放弃
ratio，改用col+img-fluid+object-fit: contain，再统一卡片最小高度（如min-height: 200px）防塌陷 - IE 不支持
ratio：必须降级为固定height+background-image+background-size: cover，同时注意alt文本可访问性不能丢
真正卡住人的不是类名记不住，而是漏掉结构层级——ratio 必须是独立容器，img-fluid 必须作用于内部 <img>，object-fit 必须由 <img> 自己承载。三者缺一，比例就保不住。
