只加 object-fit: cover 或 contain 无效，必须配合可计算高度（如 height: 250px）或宽高比（aspect-ratio: 16/9）；bootstrap 卡片中失效主因是 img-fluid 的 height: auto 与 card-img-top 无高度约束导致容器尺寸不可控；cover 适用于需填满且允许裁剪的封面图、头像，需配 object-position 微调焦点；contain 适用于必须完整显示的证件照、图标；ios safari 13.3 及更早版本不支持，需用 background-image 降级。
只加 object-fit: cover 或 object-fit: contain 根本不解决问题，它必须和可计算的容器尺寸（height、aspect-ratio 或等效约束）一起用，否则浏览器连“框有多大”都不知道，属性静默失效。
为什么 object-fit: cover 在 Bootstrap 卡片里没反应
不是代码写错，而是 card-img-top 和 img-fluid 共同制造了“无高度上下文”的局面：img-fluid 带 height: auto，card-img-top 不设高，整个卡片高度由图片原始尺寸撑开——object-fit 没法裁剪一个还在浮动的盒子。
- 别在
<img>上只写style="max-width:90%"，Bootstrap 的 CSS 优先级会覆盖它 - 给
<div class="card"> 加固定高（如 <code>style="height: 250px;"）或工具类（如h-250） - 或者改用
aspect-ratio: 16 / 9，比固定像素更健壮，尤其在响应式场景下 - 自定义类推荐写法：
.img-cover { width: 100%; height: 100%; object-fit: cover; }，但前提是父容器已锁定尺寸 -
cover：填满容器、允许裁剪 → 适合轮播封面、产品主图、头像。但默认object-position: center center可能切掉人脸，必须配object-position: center top或20% 30%微调焦点 -
contain：完整显示、留白补足 → 适合证件照、UI 图标、技术配图。此时object-position几乎无效，因为整张图都在可视区内 -
fill：强制拉伸变形，和不写object-fit效果一致，除非刻意为之，一律避免 - 兼容写法：用
@supports (object-fit: cover)包裹样式，再给不支持环境写降级规则 - 更稳妥的 fallback：用
background-image+background-size: cover，但会丢失alt、SEO 和原生懒加载 - 横竖屏切换、键盘弹出时，容器宽高比可能突变，
cover会让小图缩得极小，需用媒体查询兜底：@media (orientation: landscape) { ... } - 别只测 Chrome，务必在真机 Safari 和低端安卓 WebView 上验证，Can I Use 的“支持”≠ 实际可用
object-fit: cover 和 object-fit: contain 到底怎么选
这不是视觉偏好问题，而是内容语义决定的：这张图里，哪部分绝对不能丢？
移动端真机测试最容易踩的坑
iOS Safari 13.3 及更早版本完全不支持 object-fit 在 <img> 上生效，加 -webkit-object-fit: cover 也无效，会退化成 fill 行为。
最常被跳过的点是：没锁住容器比例。你调通了 object-fit，不代表图片就安全了——它只是按你给的“框”去适配，而那个框本身是否稳定，才是变形与否的真正开关。
