img-fluid无法锁定宽高比，因其仅设max-width:100%和height:auto，高度由原始比例决定；须用.ratio容器配合w-100 h-100和object-fit:cover才能固定比例并填满。
直接给 <img> 加 img-fluid 不行——它只设 max-width: 100% 和 height: auto，高度完全由图片原始比例决定，容器没高度锚点，网格就错行、轮播图就塌陷。
为什么 img-fluid 无法锁定宽高比
img-fluid 的作用是让图片随父容器宽度缩放，但它的 height: auto 意味着高度永远被动跟随原始比例。一张 4:3 的图和一张 16:9 的图放进同一排 .col-6，它们渲染出的高度必然不同；这不是图片“没缩放”，而是 .col 默认 height: auto，根本没给高度约束。
- 常见现象：卡片网格中图片高度不齐，悬停层错位、背景色露白
- 错误做法：给
<img>直接加style="max-width:90%"—— 强制拉伸变形 - 根本限制：
object-fit必须在有明确宽高尺寸的容器里才能生效
必须用 .ratio 容器包裹图片
.ratio 类（Bootstrap 5.3+）才是控制比例的正确入口。它不靠像素值，而是用 aspect-ratio 或伪元素 ::before 的 padding-top 实现响应式占位，确保“画布”比例固定。
- 结构必须是：
<div class="ratio ratio-16x9"><img src="..." class="w-100 h-100" style="max-width:90%"></div> -
.ratio不能直接加在<img>上，必须是一个独立<div> 容器 <li>内置类如 <code>ratio-1x1、ratio-4x3、ratio-16x9可直接用，无需写 CSS - 如果需要自定义比例（比如 21:9），可加
style="aspect-ratio: 21 / 9;"（现代浏览器支持）或用padding-bottom回退 -
img必须加class="w-100 h-100"（不是width: 100%行内样式），否则object-fit无作用对象 -
object-fit: cover是最常用选择：等比缩放后居中裁剪，填满整个.ratio区域 - 避免混用：
style="max-height: 300px"加在<img>上会干扰height: auto计算，应加在.ratio容器上，并配合overflow: hidden - 轮播图等场景，需额外给
.carousel-item设height: 100%，否则.ratio没高度来源
object-fit 和尺寸类怎么配才不翻车
光有 .ratio 只是画了个框，图片要填满且不变形，还得靠 object-fit + 尺寸控制组合。这里最容易踩坑的是样式冲突和继承失效。
真正起作用的从来不是单个类，而是 .ratio 提供比例锚点、w-100 h-100 把图片撑满该锚点、object-fit: cover 决定内容如何适配——三者缺一不可。漏掉任意一环，图片就会回退到原始行为：按自己尺寸渲染，破坏布局流。
