直接给 img 加 object-fit: cover 不生效，因 .col 作为 flex item 无明确高度，需用 .ratio + .overflow-hidden 容器配合 .w-100 .h-100 和 .object-cover 才能正确裁剪。
为什么直接给 img 加 object-fit: cover 不生效
因为 Bootstrap 的 .col 默认是 flex item，但自身不设高度，内部 img 没有明确的宽高约束边界。object-fit: cover 只在「父容器有确定宽高」时才起作用——否则它只能按图片原始尺寸渲染，结果常是拉伸、只显示左上角一小块，或完全溢出。
.ratio + .overflow-hidden 是最简可靠组合
Bootstrap 5.3+ 内置的 .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"
最小可行结构：
<div class="col">
<div class="ratio ratio-16x9 overflow-hidden">
@@##@@
</div>
</div>
响应式比例切换要自己补 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" - 配合
.d-flex .align-items-center .justify-content-center是冗余操作——那是控制整个img在容器里的位置，不是控制图片内部哪部分被裁剪
真正容易被忽略的点：当多列并排且内容高度不一时，.col 作为 flex item 会按最高列拉伸，但若该列没设 min-height: 0，内部 .ratio 的百分比高度可能计算错乱——此时加 min-height: 0 才能稳住裁剪区域。
