直接给 img 加 object-fit: cover 不生效，因 .col 作为 flex item 无明确高度，img 缺乏宽高约束；必须用 .ratio + .overflow-hidden 容器配合 .w-100 .h-100 和 .object-cover 才能正确裁剪。
为什么直接给 img 加 object-fit: cover 不生效
因为 Bootstrap 的 .col 是 flex item，自身不设高度，img 缺乏明确的宽高约束边界。object-fit: cover 只在父容器有确定尺寸时才起作用——否则它按原始尺寸渲染，结果常是拉伸、只显示左上角，或完全溢出。
.ratio + .overflow-hidden 是最简可靠组合
.ratio（如 .ratio-16x9 或 .ratio-1x1）通过伪元素或 aspect-ratio 锁定宽高比，但它本身不裁剪；.overflow-hidden 才是裁剪生效的关键开关：
-
.ratio提供比例“画布”，但只是占位，不控制内容渲染 - 必须把
.overflow-hidden加在.ratio容器上，否则溢出部分仍可见 -
img必须加.w-100 .h-100，否则无法填满容器，object-fit就没作用对象 - Bootstrap 5.3+ 可直接用
.object-cover；旧版本需手写style="object-fit: cover"
最小可行结构：
<div class="col">
<div class="ratio ratio-16x9 overflow-hidden">
@@##@@
</div>
</div>
对齐靠 object-position，不是靠 text-center
text-center 对块级 img 无效；vertical-align 在 flex 容器里也不起作用。真正可控的是 object-position：
- 居中裁剪：默认就是
object-position: center（不用写） - 顶部对齐（比如人物照不想裁掉脸）：
style="object-position: top" - 左侧对齐：
style="object-position: left center"
响应式比例切换得自己补 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。
容易被忽略的点：漏掉 .overflow-hidden、.w-100 .h-100 或任意一个 height 干扰（比如给 img 加了 max-height），都会导致比例裁剪失效。
