object-fit本身不解决变形，仅控制缩放方式；必须配合明确容器宽高或aspect-ratio才生效，否则因无基准盒子导致拉伸变形。
为什么加了 object-fit 还是拉伸变形？
最常见原因不是属性写错，而是浏览器根本没“盒子”可填——img 没设 height，父容器又靠内容撑高，导致渲染时宽高比失控。
检查是否遗漏了显式宽高：width: 100% + height: 200px 比只写 width: 100% 强；aspect-ratio: 16 / 9 是更现代、更可靠的替代方案。
-
object-fit只对替换元素（<img>、<video></video>）生效，对background-image完全无效 - 别和
max-width: 100%+height: auto共存，后者会覆盖object-fit的计算逻辑 - Flex/Grid 容器中，子项若没设
height且父容器没设min-height或align-items: stretch，高度可能塌陷 - 记得给
img加display: block，否则 inline 默认基线留白会干扰高度计算
object-fit: cover 和 object-fit: contain 怎么选？
这不是视觉偏好问题，而是语义与场景强绑定：
-
object-fit: cover：等比缩放后裁剪边缘，填满容器 → 适合卡片图、轮播封面、头像。必须配object-position微调裁剪锚点（如人脸偏上就写object-position: center top） -
object-fit: contain：等比缩放后完整显示，留白补足 → 适合证件照、产品细节图、图标。此时object-position影响小，因为整张图都在可视区内 -
object-fit: fill：强制拉伸，和不用object-fit效果一致，除非刻意要扭曲，否则一律避免 -
object-fit: scale-down：只在图片原始尺寸大于容器时退化为contain，否则用原始尺寸。适合不确定图源尺寸的组件库场景
Flex/Grid 布局中 object-fit 失效的典型原因
object-fit 必须加在 <img> 上，不是容器；它只作用于替换元素，配合 object-position 控制裁剪锚点，不解决 DPR 模糊问题。
- 常见错误：把
object-fit: cover写在网格项（如.grid-item）上，对普通div无效 - 必须同时满足：
width和height都要可计算（例如width: 100%;height: 100%），且父容器有明确尺寸（如grid-template-rows: 200px或min-height: 200px） - Flex 容器默认
align-items: stretch，会强制拉伸图片高度；仅改align-items不解决问题，必须协同flex-shrink: 0、尺寸约束和object-fit - Grid 轨道尺寸不稳定时（如用
auto或minmax(auto, 1fr)），图片加载完成前object-fit行为不可靠
iOS Safari 和 IE 的兼容性兜底怎么做？
iOS Safari 13.3 之前不支持 object-fit 在 <img> 上生效，IE 完全不支持；降级方案需兼顾语义和功能取舍。
- 用
@supports (object-fit: cover)包裹现代写法，外面写 fallback - 稳妥降级：用
background-image+background-size: cover，但会丢失alt、懒加载和 SEO 优势 - Safari 9/10 对
object-position支持不全，设了可能被忽略；关键内容区域建议用padding-bottom占位 + 绝对定位图片模拟aspect-ratio - 不要依赖
height: 100%在动态高度容器里生效——它需要父级高度可计算，而 Flex/Grid 的auto行高不可靠
真正起作用的从来不是单个属性，而是「容器尺寸锁定 + 替换元素显式宽高 + object-fit 适配规则」三者协同。最容易被忽略的是：图片加载完成前，object-fit 行为不可靠，建议加占位色或监听 load 事件再激活样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
