object-fit必须配合明确高度才生效，否则浏览器无法计算裁剪或缩放；cover适合填满容器并允许裁剪，contain适合完整显示并留白。
直接加 object-fit: cover 或 object-fit: contain 就能解决变形，但必须配明确高度，否则无效。
为什么只写 object-fit 没反应
浏览器不知道“容器多大”，object-fit 就没法算怎么裁或缩。它不是独立生效的属性，依赖一个可测量的高度上下文。
-
img { object-fit: cover; }—— 没设 height，等于白写 - 父容器没高度（比如仅靠内容撑开的
<div>），object-fit也不触发 - Bootstrap 的
img-fluid设了max-width: 100%和height: auto，这会让图片高度随宽度变化，反而破坏裁剪前提
怎么配高度才稳妥
两种常用方式，选其一即可，关键是要让 <img> 或其直接父容器有确定高度。
- 给
<img>直接写固定高：height: 200px; object-fit: cover; - 用百分比高度：
height: 100%; object-fit: cover;，但前提是父容器有高度（如div { height: 300px; }或min-height: 100vh;） - 在 Bootstrap 卡片里用
card-img-top时，得给<div class="card">或包裹它的<div class="card-img">加高度（如h-250或自定义style="height: 250px;"）
cover 和 contain 怎么选
区别不在“好不好看”，而在你要保什么。
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放并裁剪边缘，填满整个容器 —— 适合头图、卡片缩略图、轮播图 -
object-fit: contain：等比缩放并完整显示，留白补足容器 —— 适合证件照、产品细节图、需要看清全貌的场景 - 两者都默认居中；若要微调焦点位置，加
object-position: center top这类值
在 Bootstrap 组件里容易失效的几个地方
不是所有 <img> 都能直接套样式，优先级、继承链、组件封装逻辑都会干扰。
-
<picture> + <source>结构里，object-fit必须写在<img>上，不能只写在<picture> - Modal 或 Carousel 里的图片，建议单独加 class（如
class="img-cover"），再在 CSS 里写.img-cover { object-fit: cover; height: 300px; } - 用
card-img-top时，别指望只靠h-100工具类——它只对已有高度的父元素生效，得先确保<div class="card">本身有高度 - Safari 旧版本（iOS 12 及更早）不支持
object-fit，真要兼容就只能切 background-image 方案，但那是另一套逻辑了
最常被忽略的一点：你写的 object-fit 样式，可能被其他规则覆盖了。打开开发者工具，检查 <img> 的 computed styles，确认 object-fit 和 height 都是 active 状态，而不是被划掉的。否则再准的方案也白搭。
