object-fit本身不防止变形，仅控制图片在已知尺寸容器内的缩放方式；必须同时满足容器有可计算尺寸（如aspect-ratio）、img设width:100%+height:100%+display:block、父容器overflow:hidden，否则静默失效。
object-fit 本身不防止变形，它只决定“图怎么装进已知尺寸的盒子里”——盒子不存在，它就完全不工作。加了 object-fit: cover 还是拉伸，90% 是因为没给浏览器一个可测量的容器。
为什么 object-fit 写了却没效果？
不是语法错，而是渲染上下文缺失。浏览器需要明确的宽高基准才能执行缩放或裁剪逻辑。
-
img只设了width: 100%，但没配height: 100%或aspect-ratio→ 容器高度由图片原始尺寸撑开，object-fit失效 - 父容器是
display: flex，子项未设min-height或height: 100%→ 加载中时高度塌陷为 0 - 用了
float且未清除，父容器高度为 0 →img实际脱离文档流渲染 - Bootstrap 的
img-fluid含height: auto，和object-fit: cover冲突，必须显式覆盖
object-fit: cover 和 object-fit: contain 怎么选？
这不是风格偏好，而是语义绑定：关键内容是否允许被裁剪。
-
cover：等比缩放后填满容器、裁剪边缘 → 适合卡片图、轮播封面、头像。但默认object-position: center center可能切掉人脸，必须配object-position: center top等微调 -
contain：等比缩放后完整显示、留白补足 → 适合证件照、产品主图、图标。此时object-position控制的是图片在留白区内的对齐（如left top），不触发裁剪 -
fill：强制拉伸 → 会变形，除非刻意做故障效果，否则一律避免
必须配合哪些 CSS 才让 object-fit 生效？
三要素缺一不可，少一个都会退化成原始行为：
- 容器（
img自身或其父元素）要有可计算的尺寸：aspect-ratio: 16 / 9+width: 100%是现代推荐写法；老浏览器 fallback 用padding-bottom: 56.25%+position: relative+ 绝对定位img -
img需设width: 100%+height: 100%（不能只写一个），并加display: block消除行内基线间隙 - 父容器记得加
overflow: hidden，否则cover裁剪部分可能溢出边框
iOS Safari 13.3 及更早版本怎么处理？
该版本及之前完全不支持 object-fit 在 img 上生效，加 -webkit-object-fit 前缀也无效，会退化成 fill 行为（即拉伸）。
- 稳妥降级：用
background-image+background-size: cover，但会丢失alt、SEO、原生懒加载和屏幕阅读器支持 - 按需 polyfill：引入
object-fit-images，仅在检测到不支持时加载 - 服务端兜底：对关键场景（如头像）做服务端裁剪，返回固定比例图片，规避前端适配问题
真正容易被忽略的点是：你写的每一条 object-fit 规则，背后都依赖一个稳定、可测量的渲染上下文——这个“框”必须由你亲手定义，浏览器不会替你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
