用 object-fit 控制图片填充方式，配合显式 height（如 height: 200px 或 height: 100%），可解决 img-fluid 拉伸变形；cover 裁剪保比例，contain 完整显示留白，需确保父容器或图片自身有高度约束。
图片在Bootstrap里被img-fluid拉伸变形了怎么办
直接用 object-fit 覆盖默认行为，而不是改宽高或删类名。Bootstrap 的 img-fluid 会设 max-width: 100% 和 height: auto，但没管内容如何填充容器——这正是变形根源。
- 变形本质是图片宽高比和容器不一致，且
height被撑开后，浏览器默认用拉伸填满 -
object-fit是唯一标准解法，它控制的是「图片内容怎么放进盒子里」，和background-size类似但用于<img alt="CSS如何解决Bootstrap图片拉伸变形_利用object-fit属性裁剪" > - 别试图用
width/height固定尺寸，那会破坏响应式；也别删img-fluid，否则小屏下溢出
object-fit: cover 和 object-fit: contain 怎么选
选哪个取决于你要保图还是保全貌。两者都得配 height（哪怕只是 height: 200px 或 height: 100%），否则 object-fit 不生效。
-
object-fit: cover：裁剪图片以填满容器，保持宽高比——适合头图、卡片缩略图 -
object-fit: contain：完整显示图片，留白补足容器——适合证件照、产品细节图 - 注意：如果父容器没设
height，object-fit无效；常见坑是只写了object-fit: cover却忘了给<img alt="CSS如何解决Bootstrap图片拉伸变形_利用object-fit属性裁剪" >或其父元素加高度约束
在Bootstrap组件里加object-fit要小心这些地方
不是所有场景都能直接写样式。比如 <picture></picture> + <source></source>、Modal 里的图片、或者用 card-img-top 的卡片，容易因 CSS 优先级或继承丢失效果。
- 优先给
<img alt="CSS如何解决Bootstrap图片拉伸变形_利用object-fit属性裁剪" >直接加 class，比如class="img-fluid img-cover"，再在 CSS 里写.img-cover { object-fit: cover; height: 200px; } - 避免用
!important，Bootstrap 5 的img-fluid本身没设object-fit，所以一般不会冲突 - 在
card-img-top上用时，记得父<div class="card"> 或 <code><div class="card-img"> 得有明确高度，否则图片高度由内容撑开，裁剪就不可控<li>Safari 旧版（object-fit，如需兼容，得 fallback 到 <code>background-image方案，但那是另一套逻辑了 - 错误写法：
img { object-fit: cover; }—— 没高度，等于没写 - 可行写法：
img { object-fit: cover; height: 100%; }，前提是父元素有高度（比如div { height: 300px; }） - 更稳妥写法：
img { object-fit: cover; height: 200px; width: 100%; }，尤其用于固定尺寸卡片 - 响应式场景常用：
img { object-fit: cover; height: 0; padding-bottom: 66.67%; /* 3:2 */ position: relative; }+img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }，但这已超出纯object-fit范畴
一行CSS解决但必须配height的硬规则
object-fit 不是独立生效的属性，它必须和一个确定的高度配合。没有高度，浏览器就不知道“容器多大”，自然没法裁或缩。
立即学习“前端免费学习笔记（深入）”；
真正卡住人的从来不是会不会写 object-fit，而是忘记它依赖高度上下文——这点在 Flex/Grid 容器里尤其隐蔽。
