直接加 img-fluid 不行，因其仅设 max-width: 100% 和 height: auto，不控制容器高度，导致同排图片宽高比不同而错行；须用 ratio 容器配合 w-100 h-100 和 object-fit: cover 实现等比响应式占位。
直接加 img-fluid 为什么不行
img-fluid 只设 max-width: 100% 和 height: auto，它让图片按原始宽高比缩放，但**不控制容器高度**。网格列（如 col-4）宽度随屏幕变，高度却由图片内容撑开——一张 4:3 的图和一张 1:1 的图在同一行里，高度必然不同，导致错行、悬停层偏移、卡片高度不一致。
必须用 ratio 容器包裹图片
Bootstrap 5.1+ 的 ratio 类才是解决核心：它用伪元素 ::before 的 padding-top（基于父宽计算）创建固定宽高比占位，不依赖 JS，纯 CSS 响应式。
- 写法必须是：
<div class="ratio ratio-1x1"><img src="..." class="w-100 h-100" style="max-width:90%"></div> -
ratio必须作用在独立容器上，不能直接加在<img>标签上 - 支持预设：
ratio-1x1、ratio-4x3、ratio-16x9、ratio-21x9 - 自定义比例（如 3:2）要写
style="--bs-aspect-ratio: 66.666%;"（注意是高度 ÷ 宽度 × 100%，不是 "3x2"）
object-fit: cover 是填满且不变形的关键
ratio-1x1 只建了个正方形“画布”，图片若不主动适配，会留白或拉伸。必须让 <img> 自身响应这个画布：
- 加
w-100 h-100让图片占满父容器 - 必须加内联样式
style="object-fit: cover;"（或全局定义.object-fit-cover） - 绝对不要给
<img>设height、max-height或vertical-align，这些会干扰object-fit行为 -
cover等比缩放并裁剪填满；contain会留白，不适合封面类场景
容易被忽略的兼容性与布局细节
看似三步搞定，但实际部署时最容易栽在这些地方：
- 如果图片来自 CMS 或用户上传，没提前声明
width和height属性，会导致 CLS（布局偏移）——浏览器渲染时不知道预留多高，加载后突然撑开页面 -
ratio容器内只能放一个子元素（通常是<img>或<iframe></iframe>），多子元素会破坏 padding 占位逻辑 - 在 Flex 容器（如
row）里，若父列没设最小宽度（min-width），padding-top计算可能失准，出现高度塌陷 - 旧版 Safari（aspect-ratio，但
ratio类仍可用（它不依赖该属性）
