img-fluid和object-fit:cover单独使用均无法实现16:9裁剪，因前者仅等比缩放不控高，后者需容器先撑出比例；必须用ratio-16x9容器配合w-100 h-100 object-cover及overflow-hidden才能达成自动裁剪。
直接给 <img> 加 img-fluid 或 object-fit: cover 都不会自动实现 16:9 裁剪——关键在于容器必须先“撑出比例”，再让图片在里面裁剪填满。
为什么 img-fluid 不能实现 16:9 裁剪
img-fluid 只做两件事：设 max-width: 100% 和 height: auto。它不控制容器高度，也不裁剪。图片会等比缩放后完整显示，留白或被拉伸都可能发生。真正需要的不是“图片自适应”，而是“容器强制 16:9 + 图片填满并裁剪”。
-
img-fluid在.col里只是让图片宽度随列宽变化，高度仍由原始比例决定 - 如果图片是竖构图（比如 4:5），
img-fluid会把它完整显示出来，高度远超 16:9 所需，破坏卡片一致性 - 想裁剪，就必须切断“图片决定容器高度”这个链路，换成“容器决定高度，图片服从裁剪”
Bootstrap 5.3+ 最简写法：用 ratio + object-cover
这是开箱即用、无需额外 CSS 的方案，但三要素缺一不可：
<div class="ratio ratio-16x9"> —— 提供响应式 16:9 容器（内部用 <code>padding-top: 56.25%实现）-
<img class="w-100 h-100 object-cover">——w-100 h-100让图片铺满容器，object-cover触发裁剪行为 - 父容器（即
ratio元素）默认带overflow: hidden，确保裁掉的部分不可见
完整结构示例：
<div class="col">
<div class="ratio ratio-16x9">
@@##@@
</div>
</div>
注意：ratio-16x9 必须加在包裹 <img src="photo.jpg" class="w-100 h-100 object-cover"> 的 <div> 上，不能直接加在 <code><img> 标签上。
Bootstrap 4 或旧版 Bootstrap 5 怎么办
旧版本没有 ratio 类，也没有 object-cover 工具类，得手动补两段最小必要 CSS：
- 定义比例容器：
.ratio-16x9必须含position: relative、padding-bottom: 56.25%、overflow: hidden -
<img>必须设position: absolute+top: 0+left: 0+width: 100%+height: 100%+object-fit: cover - 别漏掉
overflow: hidden—— 没它，裁剪就等于没裁
示例 CSS：
.ratio-16x9 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
.ratio-16x9 > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
容易被忽略的布局干扰点
代码写对了但效果不对？大概率是栅格上下文出了问题：
-
.col如果没被正确包裹在.row里，它的宽度可能为 0，导致padding-bottom: 56.25%计算失准，整个容器塌陷 - 多个
.col并排时，其中一列内容少（只有图），其他列内容高，flex 行会按最高列拉伸，但该列自身若没设min-height: 0，内部ratio容器高度会被压缩 - 别在
.col上直接加aspect-ratio—— flex 布局会干扰计算，必须套一层内层<div> <li>Safari 有时裁剪边缘轻微溢出，显式加 <code>overflow-hidden更稳妥
真正卡住人的往往不是 object-fit 写错，而是容器没拿到可计算的宽度，或者 overflow: hidden 被某层父元素覆盖掉了。
