img-fluid 单独使用无法统一宽高比，导致网格高度不一致；必须用 ratio 容器设定比例（如 ratio-1x1），再配合 object-fit: cover 填满且不变形，三者缺一不可。
直接加 img-fluid 不足以控制比例缩放，它只管宽度不溢出、高度随原始比自动计算；要固定宽高比（比如 1:1 或 4:3），必须用 ratio 容器包裹图片，并配 object-fit 控制填充方式。
为什么 img-fluid 单独用会错行、高度不一致
img-fluid 实际是 max-width: 100% + height: auto，它让图片等比缩放，但完全依赖原始尺寸——一张 16:9 的图和一张 1:1 的图塞进相同 col-md-3 列里，渲染出的高度必然不同。结果就是网格行高参差、悬停层偏移、卡片底部对不齐。
- 错误写法：
<div class="col-md-3"><img src="a.jpg" class="img-fluid"></div>—— 没容器约束高度，height: auto自由发挥 - 正确前提：必须先有明确宽高比占位，再让图片适配这个“画布”
- 关键点：
img-fluid解决“不溢出”，ratio解决“定比例”，两者缺一不可
用 ratio 类强制统一宽高比（1:1 / 4:3 / 16:9）
ratio 是 Bootstrap 5.3+ 内置的响应式比例工具，底层靠 aspect-ratio CSS 属性（现代浏览器支持良好），降级时用伪元素 ::before 的 padding-top 实现。
- 必须单独包一层容器：
<div class="ratio ratio-1x1"><img src="..." class="img-fluid"></div>——ratio-1x1不能直接加在<img>上 - 常见比例类：
ratio-1x1、ratio-4x3、ratio-16x9、ratio-21x9 - 别指望
ratio自己撑开高度：它只定义宽高关系，实际高度由父列（如col-md-3）或显式style="height: 200px"落地 - IE 完全不支持
ratio，需单独 polyfill 或降级为固定height+object-fit
用 object-fit: cover 填满且不变形
ratio 容器建好了正方形“画布”，但图片默认仍可能留白或拉伸——这时必须靠 object-fit 控制图像如何填入。
- 必须给
<img>加内联样式：style="max-width:90%"（或全局定义一个.cover-img类） -
cover：等比缩放并裁剪填满，内容不拉伸但可能被切掉边缘 -
contain：等比缩放并完整显示，但四周可能留白 - 绝对不要同时设
height、max-height或vertical-align—— 这些会干扰object-fit行为 - 如果图源本身已变形（比如被后台错误拉伸），
object-fit: cover是唯一补救手段
对齐与布局稳定性要点
即使比例和填充都对了，网格仍可能因文字、加载延迟或 flex 行为出问题。
- 多行网格垂直对齐用
align-content-center（不是align-items-center），前提是父.row在交叉轴上有剩余空间（比如加min-vh-100或显式height） - 图片底部对不齐？加
align-self-end到<img>上，而不是调整个别卡片高度 - 加载抖动明显？在
<img>上加loading="lazy"，并预设width和height属性（哪怕只是占位值），避免 DOM 渲染后重排 - 移动端慎用
:hover效果，iOS Safari 对触摸触发不一致；必要时加touch-action: manipulation
真正容易被忽略的是：比例控制不在图片本身，而在容器结构。你得先用 ratio 定好“画布”，再用 object-fit 把图“贴”进去，最后靠栅格列宽度落地——三者顺序不能颠倒，缺一不可。
