直接给 img 加 object-fit: cover 不生效，是因为 Bootstrap 的 .col 作为 flex 容器未设高度，img 缺乏宽高约束；需用 .ratio + .overflow-hidden 包裹并确保父容器有明确尺寸。
为什么直接给 img 加 object-fit: cover 不生效？
因为 bootstrap 的 .col 默认是 flex 容器，但不设高度，img 没有明确的“裁剪容器”边界，object-fit: cover 就找不到参照尺寸——它只对「有宽高约束」的父容器起作用。常见现象是图片拉伸变形或只显示左上角一小块。
- 必须让父容器（比如
<div class="col">）具备明确的高度约束，不能靠内容撑开 - 推荐用
position: relative+ 伪元素或子容器包裹，避免直接操作img的父级col - Bootstrap 5+ 的
.ratio工具类本质就是靠 padding-top 实现宽高比锁定，但默认不支持裁剪，需配合overflow: hidden
用 .ratio + .overflow-hidden 快速实现 16:9 裁剪
这是最轻量、兼容性好、无需写 CSS 的方式，适用于固定比例场景（如封面图、卡片图）：
<div class="col">
<div class="ratio ratio-16x9 overflow-hidden">
<img src="photo.jpg" class="w-100 h-100 object-fit-cover">
</div>
</div>
-
.ratio-16x9通过padding-top: 56.25%锁定高度，父容器自动获得比例尺寸 -
.overflow-hidden是关键：没有它，object-fit: cover会溢出 -
.w-100 .h-100确保img填满整个.ratio容器 - 注意：
object-fit-cover是 Bootstrap 5.3+ 新增的工具类；若用旧版，需手动加style="object-fit: cover;"
响应式比例裁剪：不同断点用不同宽高比
移动端常需竖图（4:5），桌面端横图（16:9），不能只靠一个 .ratio-16x9。Bootstrap 不提供内置响应式 ratio 类，得自己补：
.ratio-4x5-sm { aspect-ratio: 4/5; }
@media (min-width: 768px) {
.ratio-4x5-sm { aspect-ratio: 16/9; }
}
- 优先用
aspect-ratio（现代浏览器支持良好），比 padding-top 更直观 - 如果要兼容 IE 或老 Android，仍得回退到
padding-top+position: absolute布局 - 不要在
.col上直接设aspect-ratio：它会被 flex 布局干扰，务必套一层内层 div - 裁剪区域对齐控制靠
object-position，比如居中是object-position: center，顶部对齐是object-position: top
Grid 布局下 col 高度塌陷导致裁剪失效怎么办？
当多个 .col 并列，且其中一列内容少（比如只有裁剪图），其他列内容高，flex 行会按最高列拉伸，但该列自身没设 min-height，导致内部 .ratio 计算错乱——常见于卡片网格布局。
- 解决方法：给含图的
.col加min-height: 0（重置 flex item 的最小高度约束） - 更稳妥的是在外层加
.d-flex.flex-column.h-100，再把.ratio放进这个 flex column 里 - 绝对不要给
.col直接设height：它会破坏 Bootstrap 的响应式流式行为 - 调试时检查 computed height 是否为 0 —— 是的话，说明父容器没继承高度，得往上逐层加
h-100
.ratio 容器必须是 block-level 且非 flex item 直接子元素；一旦嵌套层级或 display 类型不对，padding-top 就算对了，object-fit 也还是白搭。 
