bootstrap 5 默认不提供 object-fit 工具类，需自行通过 scss 扩展；其生效需配合 height/max-height 约束容器尺寸；与 img-fluid 同用易致宽高比冲突，推荐 w-100+h-250+object-fit-cover 或 ratio 容器方案；ie11 需 polyfill 或背景图 fallback；裁剪起点默认居中，可借 object-position 微调。
Bootstrap 5 默认不提供 object-fit 工具类
Bootstrap 5 的实用工具类（Utilities）里没有内置 object-fit 相关的类，比如 object-fit-cover 或 object-fit-contain。这不是遗漏，而是因为 CSS 的 object-fit 属于较细粒度的样式控制，官方倾向于由开发者按需扩展，而非塞进默认包里。
直接在 HTML 中写内联样式虽然能用，但破坏语义、难复用、不利于主题切换。更合理的方式是自己补充工具类。
- 推荐在自定义 SCSS 文件（如
_custom-utilities.scss）中添加：
@each $prop, $values in (object-fit: (fill: fill, contain: contain, cover: cover, none: none, scale-down: scale-down)) {
@each $key, $val in $values {
.#{$prop}-#{$key} { #{$prop}: #{$val} !important; }
}
}
编译后就能用 object-fit-cover、object-fit-contain 等类了。
为什么必须配合 height 或 max-height 才生效
object-fit 只在元素有明确「容器尺寸约束」时才起作用。对 <img> 来说，如果父容器高度由图片原始尺寸撑开，那 cover 和 contain 就没裁剪/缩放空间——它会老老实实按原图显示。
- 常见错误：只加
object-fit-cover，但没设height，结果毫无变化 - 正确做法：给图片或其父容器加上固定高，例如
h-250（Bootstrap 高度工具类）或style="height: 200px;" - 更稳妥：用
min-height+object-fit-cover，避免内容过少时塌陷
和 img-fluid 一起用要注意宽高比冲突
img-fluid 本质是 max-width: 100%; height: auto;，它会让图片宽度响应式缩放，但高度随比例自由伸缩。一旦你再加 object-fit-cover 并设了固定高度，就可能造成视觉拉伸或裁剪超出预期。
- 典型场景：卡片封面图，希望始终填满固定宽高比容器（如 16:9）
- 推荐组合：
img-fluid换成手动控制尺寸，例如用w-100+h-250+object-fit-cover - 或者改用容器方案：用
ratio ratio-16x9类包裹<img>，再对图片单独设object-fit-cover和position: absolute覆盖
IE 不支持 object-fit，但 Bootstrap 5 本身已放弃 IE
Bootstrap 5 官方声明不支持 IE，所以如果你的项目也不需兼容 IE，可以直接用 object-fit；但如果仍要支持 IE11，就得 fallback。
- 最轻量 fallback：用背景图替代
<img>，配合background-size: cover（IE9+ 支持） - 若必须用
<img>标签，可借助object-fit-images这类 polyfill，但注意它依赖 JS 加载时机，且对 SVG 无效 - 别试图用
font-family: 'object-fit'这类 hack，不可靠
真正容易被忽略的是：即使用了 object-fit-cover，图片的原始宽高比仍会影响裁剪起点（默认从中心裁），需要额外加 object-position 微调——这点连不少文档都没提。
