移动端头像裁切不能仅靠width/height+border-radius实现，因会导致图片拉伸变形或留白；需用object-fit:cover配合object-position精确控制裁切区域，并包裹固定尺寸容器、设border-radius和display:block确保效果。
移动端头像裁切为什么不能只靠 width/height + border-radius
直接设 width、height 和 border-radius: 50% 看似能做出圆形头像，但图片原始宽高比不一致时，会拉伸变形或留白——尤其在 iOS Safari 中，img 默认 display: inline 还可能产生底部空白。这不是裁切，只是缩放+遮罩，真正要的是「等比缩放后居中裁切」。
object-fit: cover 是什么，为什么必须配 object-position
object-fit: cover 让图片保持宽高比缩放，填满容器，超出部分裁掉；但它默认从顶部居中对齐（object-position: 50% 0），人像常被切掉头顶或下巴。实际头像裁切需视觉焦点落在脸部中央，所以必须显式设置 object-position：
-
object-position: 50% 50%：居中，适合标准正面照 -
object-position: 50% 40%：上移焦点，更稳妥——多数人像构图头部偏上，这样能保住额头和眼睛 - 避免用像素值（如
20px 10px），响应式下失效
必须包裹容器 + 显式宽高 + border-radius
object-fit 只对替换元素（img、video）生效，且依赖父容器有明确尺寸。常见漏掉的三步：
- 外层
<div> 必须设 <code>width和height（比如48px），不能只靠img自撑 - 该
<div> 要加 <code>border-radius: 50%，否则裁切区域是矩形，圆角只是视觉遮罩 -
img需设display: block消除 inline 基线间隙
<div style="width: 48px; height: 48px; border-radius: 50%; overflow: hidden;">
<img src="avatar.jpg"
style="width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block;">
</div>
兼容性与 fallback 方案
Android 4.4+、iOS 9+ 原生支持 object-fit，但微信内置浏览器（X5 内核早期版本）和部分低端 Android WebView 仍可能忽略。fallback 不是 JS 降级，而是 CSS 层叠：
立即学习“前端免费学习笔记（深入）”；
- 先写传统背景图方案（
background-image+background-size: cover），再覆盖object-fit规则 - 不要用
@supports包裹——某些 X5 内核识别@supports却不执行object-fit - 真遇到不支持的环境，至少保证头像可读（不拉伸），靠
max-width: 100%+height: auto保底
最麻烦的其实是设计师给的头像尺寸太小（比如 100×100 像素），在 Retina 屏上模糊——这得前端主动提示资源规范，object-fit 解决不了像素不足的问题。
