Bootstrap的.img-fluid类仅设max-width:100%且高度自适应，不处理object-fit；要实现填充需显式设置height和object-fit:cover/contain，注意IE兼容性及SVG特殊处理。
Bootstrap图片默认不响应式填充的真相
Bootstrap 5 的 .img-fluid 类只做一件事：让图片最大宽度为100%，高度随比例自适应。它不会「拉伸填满」容器，也不会裁剪或居中——这和你想用 object-fit 实现的效果根本不是一回事。
常见错误现象：<img src="..." class="img-fluid" alt="CSS如何让Bootstrap图片响应式填充_应用object-fit属性设置" > 放进固定高宽的 <div> 里，图片留白严重、被压扁、或只显示左上角一小块。<p>原因很简单：<code>.img-fluid 没碰 height 和 object-fit，浏览器按默认的 object-fit: fill（已废弃）或实际是 object-fit: contain 行为渲染，而现代语义需要显式声明。
给Bootstrap图片加object-fit的正确写法
别改 .img-fluid 原类，直接在图片上叠加自定义样式，或新建工具类：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover—— 最常用，等比缩放并裁剪填满容器（类似背景图background-size: cover） -
object-fit: contain—— 等比缩放并完整显示，可能留白（.img-fluid默认行为，但显式写更可控） - 必须同时设
height（如height: 200px或height: 100%），否则object-fit不生效 - 若父容器没高度（比如只有
width: 100%），height: 100%会失效，得靠 flex / aspect-ratio 或 JS 补位
示例（直接内联，便于调试）：<img src="photo.jpg" class="img-fluid" style="max-width:90%" alt="CSS如何让Bootstrap图片响应式填充_应用object-fit属性设置" >
和Bootstrap 4/5 的兼容性陷阱
object-fit 在 IE 完全不支持，Edge 16+ 才开始支持。如果你的项目还要兼容 IE11：
- 别指望纯 CSS 方案，得 fallback 到 background-image + background-size: cover
- 或用 polyfill（如 object-fit-images），但要注意它只处理 <img alt="CSS如何让Bootstrap图片响应式填充_应用object-fit属性设置" >，不处理伪元素或 SVG
另外，Bootstrap 5 的 .card-img-top 或 .figure-img 这类语义类，本身没设 height，直接加 object-fit 无效——必须先确保高度可计算。
性能提示：频繁切换 object-fit 值（比如 hover 动画）可能触发重绘，但一般静态展示无影响。
用CSS变量统一管理object-fit行为
如果多个组件都要用不同 object-fit 模式，硬写 style 或一堆 class 很容易失控。推荐用 CSS 自定义属性 + Bootstrap 的 utility API 思路：
在 :root 或组件 scope 里定义：:root { --bs-object-fit: cover; }
然后写通用规则：img.object-fit { height: var(--bs-img-height, 100%); object-fit: var(--bs-object-fit); }
这样后续只需：<img src="..." class="img-fluid object-fit" style="max-width:90%" alt="CSS如何让Bootstrap图片响应式填充_应用object-fit属性设置" >
或者用 JS 动态切 --bs-object-fit 值，比操作 class 更轻量。
容易被忽略的一点：当图片是 SVG 时，object-fit 失效（SVG 是替换元素，但行为不同于位图），此时得用 viewBox + preserveAspectRatio 控制。
