bootstrap 5 中 img 标签默认不支持 object-fit，需手动添加类或内联样式；img-fluid 仅设 max-width: 100% 和 height: auto，必须配合 width/height（如 w-100 h-100 或固定高）及 object-fit: cover/contain 才能实现可控裁剪或等比填充。
bootstrap 5 中 img 标签默认不支持 object-fit，需手动加类或内联样式
bootstrap 自带的响应式图片类（如 img-fluid）只设置 max-width: 100% 和 height: auto，不会触发 object-fit。这意味着图片在 col 容器中拉伸变形、留白或裁剪都不可控——除非你显式声明 object-fit 及其配套属性。
常见错误现象：给 <img> 加了 img-fluid 后放进 col-4，结果高度塌陷、图片被压扁，或上下/左右留大片空白。
- 必须同时设置
width: 100%和height: 100%（或固定高），否则object-fit不生效 -
img-fluid会覆盖height，所以要么放弃它，要么用!important覆盖（不推荐） - 推荐做法：自定义一个类，比如
img-cover，封装常用组合
.img-cover {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
如何让图片在固定高宽的 col 内按比例填充并居中裁剪
典型场景：卡片网格（card + col）中统一图片高度，又不想拉伸失真。这时不能依赖图片原始尺寸，得靠容器约束 + object-fit: cover。
关键点在于：容器（col 或其子元素）必须有明确高度，否则 height: 100% 无参照。
- 给
col加h-100（Bootstrap 5 高度工具类），但仅当父容器有高度时才有效 - 更可靠的是在图片外层包一层
<div class="ratio ratio-4x3">（Bootstrap 5 内置比例容器）<li>然后把 <code>img放进该div，设为position: absolute并铺满
<div class="col-4">
<div class="ratio ratio-16x9">
@@##@@
</div>
</div>
object-fit: contain vs cover 在 Bootstrap 布局中的实际差异
选错 object-fit 值会导致完全不同的视觉效果，尤其在响应式列宽变化时：
-
object-fit: cover：图片等比缩放后填满容器，可能裁剪边缘；适合封面图、头图 -
object-fit: contain：图片等比缩放后完整显示，容器内留白；适合 Logo、图标、产品白底图 -
object-position控制裁剪锚点，默认是center，可改用top、bottom left等避开关键内容（比如人脸）
注意：contain 模式下，如果容器宽高比和图片不一致，留白位置不可控——Bootstrap 的 ratio 类能帮你提前锁定容器比例，减少意外。
IE11 兼容问题：Bootstrap 5 已不支持 IE，但若项目仍需兼容，object-fit 必须降级
IE11 完全不支持 object-fit，哪怕加了 -ms-object-fit 也无效。此时只能用背景图方案替代：
- 把
img换成<div style="background-image: url(...)..."> <li>配合 <code>background-size: cover/contain和background-position - 用 Bootstrap 的
bg-*工具类（如bg-primary）占位防抖动
这不是优雅解，但比 JS polyfill 更轻量、更可控。真正要兼顾 IE 的项目，建议从设计阶段就避免依赖 object-fit 的布局逻辑。
最易被忽略的一点：即使用了 ratio 容器，如果图片本身加载失败或为空，position-absolute 的 img 会消失不见——务必加 alt 和兜底背景色（如 bg-light）。
