object-fit: cover 在 Bootstrap 卡片中失效，根本原因是 img-fluid 的 height: auto 导致容器高度不可控，必须用 ratio 容器锁定宽高比，并配以 w-100 h-100 object-fit-cover 才能生效。
直接说结论：只加 object-fit 没用，必须同时满足三个条件——容器有可计算高度（或宽高比）、img 设 width: 100% 和 height: 100%、且不能被 img-fluid 的 height: auto 覆盖。
为什么 object-fit: cover 在 Bootstrap 卡片里完全没反应
不是代码写错，是 card-img-top + img-fluid 组合导致容器高度不可控：img-fluid 强制 height: auto，图片原始尺寸撑开卡片，浏览器根本不知道“填满谁”。object-fit 静默失效。
- 别在
<img>上只写style="object-fit: cover"—— Bootstrap 的 CSS 优先级会覆盖它 - 给外层
<div class="card">加固定高（如h-250）或aspect-ratio: 16 / 9（现代浏览器） - 更推荐用
<div class="ratio ratio-16x9">包一层，它通过伪元素生成高度，与图片加载无关
如何让 img 在 col 列中真正按比例填充并居中裁剪
关键不在图片本身，而在容器是否锁定宽高比。Bootstrap 的 col 默认不设高，height: 100% 就没参照物。
- 必须在外层加
<div class="ratio ratio-4x3">或ratio-16x9，不能直接加在<img>上 -
<img>要加class="w-100 h-100 object-fit-cover position-absolute top-0 start-0"，否则不铺满 - 别设
max-height、vertical-align或行内height属性，它们会破坏object-fit行为 - 如果要用
img-fluid，必须放弃它——或者用!important覆盖其height: auto（不推荐）
兼容 iOS Safari 13.3 及更早版本的降级方案
iOS Safari 13.3 及更早版本完全不支持 object-fit 在 <img> 上生效，-webkit-object-fit 也无效，会退化成 fill 行为。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (object-fit: cover)包裹现代样式，再写 fallback 规则 - 更稳妥的是改用
background-image：div设背景图 +background-size: cover+background-position: center - 但代价明确：丢失
alt文本、SEO、原生懒加载、loading="lazy"支持 - 横竖屏切换或软键盘弹出时，容器比例可能突变，
cover会让小图缩得极小，需用@media (orientation: landscape)单独兜底
最常被忽略的一点：所有比例控制场景下，width 和 height 属性（无论是 HTML 属性还是 CSS）不是“可选”，而是强制前提；而 object-fit 的行为，永远取决于它作用的那层容器是否真的有“框”。
