object-fit: cover 在 Bootstrap 的 col 中不生效是因为 col 默认无高度导致容器塌陷；必须为图片父容器设置 min-height、height 或 aspect-ratio 等显式尺寸约束，同时 img 需配合 w-100、h-100 且禁用 max-width: 100%。
为什么 object-fit: cover 在 Bootstrap 的 col 里不生效？
因为 Bootstrap 的 col 默认不设高度，而 object-fit 只在容器有明确宽高约束时才起作用。图片父容器（比如 div.col）高度塌陷，img 自然按原始尺寸渲染，cover 就没机会裁切。
必须给图片容器加显式高度或最小高度
不能只靠 col 的宽度响应式，得让父容器“撑起来”。常见做法是用 min-height 或 height 配合视口单位或固定值：
-
min-height: 200px（适合固定高度场景） -
min-height: 50vh（适合全屏比例填充） - 配合
aspect-ratio: 16/9（现代浏览器，比写死高度更灵活）
示例：
<div class="col">
<div style="min-height: 300px; aspect-ratio: 4/3;">
<img src="photo.jpg" class="w-100 h-100" style="object-fit: cover;">
</div>
</div>
Bootstrap 类与 object-fit 的配合要点
Bootstrap 本身不提供 object-fit 工具类，需手动加内联样式或自定义 CSS。注意几个关键点：
-
w-100和h-100必须同时加在img上，否则object-fit无参照尺寸 - 不要对
img设max-width: 100%（Bootstrap 默认有，但会干扰h-100，建议重置：max-width: none） - 若用
img-fluid，它会强制max-width: 100%+height: auto，直接和h-100冲突，必须弃用
兼容性与 fallback 处理
object-fit 在 IE 完全不支持，Edge 12+、Chrome 31+、Firefox 36+ 支持良好。如果必须兼容旧 IE：
- 用
background-image替代img标签（配合background-size: cover） - 服务端生成裁剪图，或前端用
canvas模拟（成本高，仅极端需求） - 简单 fallback：不裁切，仅用
width: 100%+height: auto，接受留白
现代项目中，只要不保 IE，object-fit: cover 加 aspect-ratio 就是最简可靠的方案——但别忘了，col 本身不是容器，你得亲手给它“立住”高度。
