移动端图标被拉伸是因img/svg设固定宽高而图源比例不匹配所致；object-fit可控制内容缩放方式，contain等比显示留白，cover等比填满裁边，需配合object-position调整对齐，兼容性需注意老版本fallback。
移动端图标被拉伸的典型表现
用 <img> 或 <svg></svg> 做图标时，设了固定宽高（比如 width: 24px; height: 24px;），但图源本身宽高比和容器不一致，结果图标被压扁或拉长——这不是 bug，是浏览器默认行为：<img> 的渲染逻辑就是“填满容器”，不管比例。
object-fit 是什么，为什么它能解决这个问题
object-fit 是专门控制替换元素（<img>、<video></video>、<iframe></iframe>）内容如何适应容器的 CSS 属性。它不改变容器尺寸，只调整内部图像的缩放和裁剪方式。
对图标最常用的是两个值：
-
object-fit: contain：等比缩放，完整显示全部内容，可能留白 -
object-fit: cover：等比缩放并填满容器，可能裁剪边缘
图标通常选 contain，避免关键图形（比如箭头尖、圆点）被切掉。
必须配合 object-position 控制对齐位置
object-fit: contain 留白时，默认居中。但有些图标需要靠左/靠上对齐（比如和文字 inline 排列时底部对齐），就得配 object-position：
-
object-position: left top—— 左上对齐，留白在右下 -
object-position: center bottom—— 底部居中，留白在顶部
注意：object-position 只在 object-fit 为 contain 或 cover 时生效；设成 fill 就没意义了。
兼容性和实际写法要注意这些坑
Android 4.4+、iOS 9+ 支持 object-fit，老版本（比如微信内置浏览器早期版本）可能不认。如果必须兼容，得 fallback：
- 给
<img>加display: block防止行内默认基线对齐导致的错位 - 用
background-image+background-size: contain替代（但失去语义和 SEO） - 检查是否父容器有
overflow: hidden——contain下留白会被裁掉，反而看不出效果
最简可用写法：
img.icon {
width: 24px;
height: 24px;
object-fit: contain;
object-position: center center;
}
别忘了给所有图标类统一加 vertical-align: middle 或 display: inline-block，否则和文字混排时容易上下浮动。
真正麻烦的不是属性本身，而是不同设备下图标和文字 baseline 的微妙差异——这点连设计稿都难体现，得真机反复调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
