直接给img加object-fit: cover不生效，因为.col默认为flex容器且未设高度，img缺乏宽高约束边界；需用.ratio+.overflow-hidden包裹并确保父容器有明确尺寸，其中.ratio提供比例容器，.overflow-hidden实现裁剪。
为什么直接给 img 加 object-fit: cover 不生效
因为 .col 默认是 flex item，自身不设高度，img 没有明确的宽高约束边界。object-fit: cover 只在父容器有确定宽高时才起作用——否则它按原始尺寸渲染，结果常是拉伸、只显示左上角一小块，或完全溢出。
.ratio + .overflow-hidden 是最小可靠组合
.ratio（如 .ratio-16x9）通过伪元素 + padding-top 锁定宽高比，但它本身不裁剪；.overflow-hidden 才是裁剪生效的关键开关。
-
.ratio提供比例容器（比如padding-top: 56.25%对应 16:9），但只是“画布”，不控制内容 -
.overflow-hidden必须加在.ratio容器上，否则object-fit: cover溢出部分仍可见 -
img必须加.w-100.h-100，否则无法填满容器，object-fit就没作用对象 - Bootstrap 5.3+ 可直接用
.object-cover；旧版本需手写style="object-fit: cover"
响应式比例切换必须手动补 CSS
Bootstrap 不提供 .ratio-4x5-sm 这类响应式 ratio 类。想移动端用 4:5、桌面端切 16:9，得自己写：
.ratio-4x5-sm { aspect-ratio: 4/5; }
@media (min-width: 768px) {
.ratio-4x5-sm { aspect-ratio: 16/9; }
}
- 优先用
aspect-ratio（现代浏览器支持好），比padding-top更直观、无伪元素干扰 - 不要直接在
.col上设aspect-ratio：flex 布局会干扰计算，务必套一层内层div - IE 或老 Android WebView 不支持
aspect-ratio和object-fit，得回退到background-image方案
object-position 控制裁剪锚点，不是靠 text-center
text-center 对块级 img 无效；vertical-align 在 flex 容器里也不起作用。真正可控的是 object-position：
- 居中裁剪：默认就是
object-position: center（不用写） - 顶部对齐（比如人物照不想裁掉脸）：
style="object-position: top" - 左侧对齐：
style="object-position: left center"
容易被忽略的是：当多个 .col 并列且内容高度不一致时，flex 行会按最高列拉伸，但含图的列若没设 min-height: 0，内部 .ratio 计算可能错乱——卡片网格里最常踩这个坑。
