object-fit: cover或contain本身不生效，必须配合可计算宽高（如aspect-ratio）、width/height:100%、display:block及overflow:hidden，否则浏览器无“盒子”可填，导致拉伸变形。
只加 object-fit: cover 或 object-fit: contain 不会解决形变，它根本不会生效——浏览器连“容器多大”都算不出来，自然不缩放也不裁剪。
为什么写了 object-fit 还是拉伸变形？
不是属性写错，而是没给浏览器一个可测量的“盒子”。object-fit 不是自适应开关，它只决定“图怎么放进已知尺寸的盒子里”。盒子不存在，它就静默失效。
-
img只设了width: 100%，但height是auto或未声明 → 容器高度由图片原始尺寸撑开，无法约束缩放 - 父容器是
display: flex或grid，子项没设height: 100%或min-height→ 加载中高度塌陷为 0 - 用了 Bootstrap 的
img-fluid类 → 它带height: auto，和object-fit: cover冲突 - 没加
display: block→img默认是 inline 元素，基线留白干扰实际高度计算
必须配合哪些 CSS 才让 object-fit 生效？
三要素缺一不可：可计算的宽高、明确的渲染上下文、可控的溢出行为。
- 容器或
img自身要有可计算尺寸：width: 100%+height: 200px，或更推荐的width: 100%+aspect-ratio: 16 / 9 -
img必须设width: 100%和height: 100%（不能只靠父容器撑高） - 加
display: block消除行内间隙；父容器加overflow: hidden（尤其用cover时，否则裁剪部分会溢出）
cover 和 contain 到底怎么选？
这不是视觉偏好，而是内容语义决定的：这张图里，哪部分绝对不能丢？
-
object-fit: cover：等比缩放后填满、裁剪边缘 → 适合轮播封面、卡片图、头像。但默认object-position: center center可能切掉人脸，必须配object-position: center top或具体偏移值 -
object-fit: contain：等比缩放后完整居中显示、留白补足 → 适合证件照、UI 图标、技术配图。此时object-position几乎无效，因为整张图都在可视区内 -
object-fit: fill：强制拉伸，和不写object-fit效果一致 → 除非刻意做故障效果，否则一律避免
iOS Safari 和旧版浏览器怎么兜底？
iOS Safari 13.3 及更早版本完全不支持 object-fit 在 img 上生效，加 -webkit-object-fit 也无效，会退化成 fill 行为（即拉伸）。
- 用
@supports (object-fit: cover)包裹现代写法，再给不支持环境写降级规则 - 更稳妥 fallback：用
background-image+background-size: cover，但会丢失alt、SEO 和原生懒加载 - 关键场景（如头像）建议服务端预裁剪为固定比例，规避前端适配复杂度
真正容易被忽略的是：你写的每一条 object-fit 规则，背后都依赖一个稳定、可测量的渲染上下文——这个“框”必须由你亲手定义，浏览器不会替你猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
