图片拉伸变形主因是 img 被设固定 height（如 200px），应改用 height: auto；object-fit 仅对替换元素有效，cover 裁边填满、contain 全显留白，IE 不支持需降级为背景图方案。
图片拉伸变形？先确认是不是 img 元素本身被强制宽高了
很多“拉伸”其实是父容器或 img 自身写了死的 width/height，比如 width: 100%; height: 200px; —— 这会让图片强行撑满高度，完全无视原始比例。此时加 object-fit 也没用，因为浏览器先按固定尺寸框住了它。
实操建议：
- 检查
img元素是否设置了具体数值的height（尤其是带单位的 px、rem），优先改为height: auto; - 确保父容器有明确尺寸（如
max-width: 100%; height: 300px;），否则object-fit在无约束容器里不生效 -
object-fit只对替换元素（img、video）有效，对背景图要用background-size
object-fit: cover 和 contain 的行为差异很关键
两者都保持图片比例，但裁剪逻辑完全不同：cover 保证填满容器，可能裁边；contain 保证全显示，可能留白。选错会导致内容被意外截掉，尤其头像、产品图等关键区域。
常见错误现象：
- 用了
cover，但人物脸部总被切掉 → 检查图片原图焦点是否居中，必要时配合object-position调整（如object-position: center top;） - 用了
contain，结果图片缩得太小、四周大片空白 → 容器宽高比和图片不匹配，得换图或改容器尺寸 - 在 flex 布局里
img不响应object-fit→ 确保父级display: flex;下没写align-items: stretch;冲突（可显式设为flex-start）
兼容性坑：IE 完全不支持，旧版 Safari 需要前缀
object-fit 在 IE 中是纯无效的，所有版本都不认。Safari 从 10.1 开始才原生支持，更早版本（如 iOS 9.3）需要 -webkit-object-fit。
实操建议：
- 如果必须兼容 IE，别用
object-fit，改用背景图 +background-size: cover/contain（注意background-image无法被屏幕阅读器识别） - 用 Autoprefixer 时确保配置包含
safari >= 9，否则旧 Safari 会漏掉前缀 - 测试时直接打开 Safari 9 或 iOS 9 模拟器，别只信 Can I Use 上的“部分支持”描述
性能提示：别在大量图片上滥用 object-fit
它本身不触发重排，但若配合 JS 动态改 object-position 或频繁切换 cover/contain，可能引发重绘。更隐蔽的问题是：当图片尺寸远大于容器（比如 4000×3000 的图塞进 200×150 的盒子），cover 仍会解码整张大图，内存占用高。
优化方向：
- 服务端提供多尺寸图，前端用
srcset+sizes匹配容器宽度，让浏览器下载合适尺寸 - 避免对
img同时设置width/height属性和object-fit—— 属性宽高会触发浏览器提前分配渲染空间，影响加载感知 - 动画场景慎用
object-fit，CSS 动画改它不会硬件加速，卡顿明显
object-fit 不改变图片实际尺寸，只是视觉呈现。如果你靠 JS 读取 img.naturalWidth 或做 canvas 绘制，拿到的仍是原始分辨率，和屏幕上看到的“拉伸后”样子无关。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
