img-fluid 单独使用无法保持固定宽高比，因其仅设 max-width:100% 和 height:auto，导致不同比例图片在网格中高度不一；必须用 ratio 容器（如 ratio-1x1）配合 object-fit 和 w-100 h-100 才能统一尺寸、避免变形与错行。
直接用 img-fluid 不足以保持固定宽高比，它只做等比缩放，不锁容器比例；真正要让图片在网格中“站得齐、不变形”，必须用 ratio 容器包裹 + object-fit 控制填充方式。
为什么 img-fluid 单独用会错行、拉伸、留白
img-fluid 本质是 max-width: 100% + height: auto，它让图片按原始宽高比缩放，但高度完全由内容决定——一张 4:3 的图和一张 1:1 的图塞进同一行 col-4，渲染高度必然不同。结果就是网格行高不一致、悬停层偏移、卡片高度参差。
- 错误写法：
<div class="col-4"><img src="a.jpg" class="img-fluid"></div>—— 没有容器约束高度，img-fluid无力回天 - 常见干扰：父容器用了
display: flex但没设align-items: flex-start，图片被 flex 对齐逻辑强行拉高 - 更隐蔽的坑：给
<img>加了width或heightHTML 属性（如width="800"），IE 和部分现代浏览器会优先按这个固有尺寸渲染，覆盖max-width
Bootstrap 5.3+ 正确写法：用 ratio 类 + object-fit
ratio 类（如 ratio-1x1、ratio-16x9）才是控制比例的核心，它通过伪元素撑开高度，与图片加载状态无关，且已内置 position: relative 和 overflow: hidden。
- 必须单独包一层
<div class="ratio ratio-1x1">，不能直接加在<img>上 -
<img>要加class="w-100 h-100"（或style="width: 100%; height: 100%;"），再配object-fit: cover（裁剪填满）或object-fit: contain（完整居中） - 别给
<img>设height、max-height或vertical-align，这些会破坏object-fit行为 - 示例：
<div class="ratio ratio-1x1"> <img src="photo.jpg" class="w-100 h-100 object-fit-cover"> </div>
Bootstrap 4 或需要兼容 IE 的场景：退回 padding-top 技巧
ratio 类在 Bootstrap 4 及 IE 中完全不可用，aspect-ratio 属性也无效，必须手动模拟比例容器。
立即学习“前端免费学习笔记（深入）”；
- 外层
<div class="position-relative">必须显式声明，否则绝对定位的图片会飞出可视区 - 用
padding-top: 75%实现 4:3，padding-top: 56.25%实现 16:9（计算公式：目标高 ÷ 目标宽） - 图片需设
class="position-absolute top-0 start-0 w-100 h-100"，并配合background-image替代方案（因 IE 不支持object-fit） - 语义损失不可避免：
alt文本、SEO、可访问性全丢，这是兼容 IE 必须付出的代价
容易被忽略的细节：图片原始尺寸和布局抖动（CLS）
即使 ratio 和 object-fit 都配对了，如果 <img> 标签没写 width 和 height HTML 属性，浏览器首次渲染时无法预留空间，图片加载后突然撑开页面，Lighthouse 就会报「累积布局偏移」（CLS）。
- 这两个属性值应为图片原始分辨率（如
width="1200" height="800"），不是 CSS 尺寸 - 它们不影响响应式行为，Bootstrap 会用它们计算缩放比例
- 后端返回不确定尺寸的图片时，至少估算一个典型宽高比，在
ratio容器里 fallback - 别在
<img>上同时写width和max-width，后者会被前者压制
