object-fit: cover单独使用几乎必然失效，必须配合明确宽高（或aspect-ratio）、display: block及object-position才能正确裁剪缩放。
只写 object-fit: cover 几乎一定失效——它不是独立开关，而是依赖容器有明确尺寸才能计算裁剪和缩放。
为什么加了 object-fit: cover 还是拉伸变形
浏览器根本不知道“盒子有多大”，object-fit 就没法决定怎么缩、往哪裁。常见失效场景包括：
-
img只设了width: 100%，但没设height或aspect-ratio，高度由原始图片撑开 - 父容器用了
float、display: contents或未清除浮动，导致高度塌陷为 0 - 在 Flex/Grid 容器中，子项没设
min-height或height: 100%，且行高未约束 - Bootstrap 的
img-fluid含height: auto，和cover冲突，必须显式覆盖
必须同时设置的三个关键条件
object-fit: cover 要生效，img 元素本身必须满足：
-
width和height都要可计算（例如width: 100%; height: 100%，或width: 100%; aspect-ratio: 16 / 9） -
img最好设为display: block，避免行内元素默认间隙干扰高度 - 父容器需有明确渲染空间：要么自身有
height，要么用aspect-ratio锁定比例，或用padding-bottom+position: relative模拟
object-position 必须配 cover 一起用
默认 object-position: center center 会把图片中心对齐容器中心，但人脸、Logo、Banner 文字往往不在正中。不调就容易切掉关键内容：
- 人物偏上？用
object-position: center top或object-position: 50% 0 - Banner 文字在底部？用
object-position: center bottom或object-position: 50% 100% - 想左对齐保留 Logo？用
object-position: left center或0 50%（注意：避免混用单位，如left 20%） - 这个值在
contain下基本无效，只对cover和scale-down有意义
兼容性兜底和容易忽略的点
Safari 13.3 及更早版本完全不支持 object-fit 在 img 上生效，加前缀也无效；另外几个常被跳过的细节：
- 父容器记得加
overflow: hidden，否则裁剪部分可能溢出 - 不要在
img上同时写width: 100%和max-width: 100%，二者冲突会导致高度计算异常 - 用
<picture></picture>时，object-fit必须写在<img>上，不是<picture></picture> - 图片加载完成前，
object-fit行为不可靠，建议加占位色或监听load事件再激活样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
