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