object-fit: cover 单独使用无效，必须配合可计算高度（如 height: 200px 或 height: 100%）或宽高比（aspect-ratio），否则浏览器无法确定裁剪容器尺寸；在 Bootstrap 卡片中失效主因是 img-fluid 设 height: auto、card-img-top 无高度约束，需显式设置图片或父容器高度。
只写 object-fit: cover 没用，必须配可计算的高度或宽高比，否则浏览器根本不知道往多大盒子里裁。
为什么 object-fit: cover 在 Bootstrap 卡片里没反应
常见失效不是代码写错，而是容器没尺寸上下文：img-fluid 自带 height: auto，和 cover 冲突；card-img-top 本身不提供高度约束，父 <div class="card"> 高度由内容撑开，图片实际渲染高度不可控。
- 别只给
<img>加object-fit: cover，先确保它有明确的渲染空间 - 优先在
<img>上设height: 100%或固定值（如height: 200px），而不是依赖父容器“自动撑高” - 如果卡片高度不统一，用
aspect-ratio: 16 / 9替代固定像素高，现代浏览器兼容性已足够好
在 card-img-top 上安全加 object-fit 的写法
Bootstrap 封装了样式优先级，直接写 style="object-fit: cover" 容易被覆盖。推荐用自定义类名 + CSS 规则：
- HTML：
<img src="..." class="img-fluid img-cover" alt=""> - CSS：
.img-cover { object-fit: cover; height: 100%; }—— 注意必须同时存在height和object-fit - 前提是父
<div class="card">有高度，比如加h-250工具类，或设style="height: 250px;" - 若用
aspect-ratio，可去掉父容器高度限制：.img-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
object-fit: cover 和 object-fit: contain 怎么选
这不是视觉偏好问题，而是语义需求决定的：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：填满容器、裁剪边缘，适合封面图、产品主图、轮播缩略图；但人脸/Logo 可能被切，需配合object-position: center top微调焦点 -
object-fit: contain：完整显示、留白补足，适合证件照、UI 图标、技术文档配图；此时object-position影响很小，因为整张图都在可视区内 -
object-fit: fill会强制拉伸变形，除非刻意为之，一律避免
移动端特别要注意的坑
小屏上 cover 容易切掉关键区域，尤其人脸偏上或文字在底部时：
- 用
object-position: center top把裁剪起点往上移，保全脸部 - NavbarBrand 图片建议用
object-fit: contain+max-height: 2.5rem，避免 logo 被压扁或溢出导航栏 - IE11 完全不支持
object-fit，如需兼容，只能 fallback 到background-image+background-size: cover方案
真正让 object-fit 生效的，从来不是那行属性本身，而是你有没有给它一个能算清楚的盒子——宽高、比例、父容器约束，缺一不可。写完 cover 看不到效果？先查 height 或 aspect-ratio 是否到位。
