Bootstrap 5 中 object-fit-cover 无反应，因 img-fluid 仅设 max-width:100% 和 height:auto，未提供高度约束；必须配合明确高度（如 h-250）或 ratio 容器（如 ratio-16x9）才能生效。
Bootstrap 5 里为什么加了 object-fit-cover 没反应
因为 object-fit 只在容器有明确高度（或最大高度）约束时才生效。Bootstrap 的 img-fluid 类只设了 max-width: 100% 和 height: auto，它让图片宽度响应式缩放，但高度完全由原始比例决定——此时再加 object-fit-cover，浏览器找不到“要裁剪进多大框里”，就直接忽略。
必须手动给容器或图片本身加高度控制：
- 用
w-100 h-250 object-fit-cover这类组合（h-250是固定高度） - 或用
min-height: 250px; object-fit-cover防止内容过少时塌陷 - 若需响应式高度，优先走
ratio容器方案（见下一条） - 别混用
img-fluid和object-fit-cover——它们目标冲突
如何让图片在 Bootstrap 中稳定保持 16:9 比例
直接给 <img> 加 style="aspect-ratio: 16/9" 是无效的：图片固有尺寸会覆盖该属性。必须用容器承载比例逻辑。
Bootstrap 5.3+ 推荐写法：
<div class="ratio ratio-16x9"> <img src="photo.jpg" class="w-100 h-100 object-fit-cover"> </div>
ratio-16x9 内置了 aspect-ratio: 16/9、position: relative 和 overflow: hidden，比手写更稳。旧版本（5.2 及以下）得用 padding-top: 56.25% + position-absolute 模拟，维护成本高，且需确保外层有 position-relative。
object-fit-cover 和 object-fit-contain 怎么选
这不是“哪个更好”，而是“哪条规则优先”：
-
object-fit-cover：填满容器，裁掉多余部分。适合卡片封面、轮播图、产品主图——你更在意视觉饱满、无留白 -
object-fit-contain：完整显示，留白保全内容。适合证件照预览、用户头像、技术文档配图——你更在意信息不被切掉 - 别用
object-fit-fill：它强制拉伸，必然变形，除非你明确要扭曲效果 - 移动端尤其注意：cover 在小屏上容易切掉人脸或关键文字，可配合
object-position: top微调裁剪起点
IE11 兼容问题怎么绕过去
Bootstrap 5 官方已放弃 IE 支持，但如果你的项目仍需兼容，object-fit 就不能用。可行替代路径只有两条：
- 改用
background-image：<div class="bg-img-cover" style="background-image: url(...)"></div>，再配background-size: cover和background-position: center。但要注意：background-image不支持srcset、无法被屏幕阅读器识别、相对路径在 CSS 文件中易 404 - 用绝对定位图片模拟：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，配合width: auto; height: 100vh;实现居中覆盖。它兼容 IE11，但语义弱、JS 动态换图麻烦 - 不要指望 polyfill：现有
object-fit-images库对现代构建工具支持差，且在某些安卓 WebView 下失效
真正难处理的不是语法兼容，而是语义丢失和响应式路径管理——这些细节一旦漏掉，上线后就会变成不可见的坑。
