头像预览不能只设width/height像素值，因会强制拉伸变形；正确做法是父容器固定尺寸（如120px×120px），img设width:100%;height:100%;object-fit:cover;并用object-position微调裁剪锚点。
头像预览为什么不能只设 width/height
直接给 <img> 设 width: 120px; height: 120px; 会导致图片被强行拉伸变形，尤其当用户上传的是手机竖拍图或宽幅截图时，五官会被压扁或拉长。这不是“适配”，是破坏。
根本原因是：默认的 object-fit: fill（即不写该属性时的行为）会无视原始比例强制填满——这正是你要避免的。
正确做法是让容器尺寸固定，再用 object-fit 控制内容如何“塞进去”：
- 给
<img>设置width: 100%; height: 100%，使其撑满父容器 - 父容器必须有明确宽高（如
120px × 120px），不能靠图片自身撑开 - 在
<img>上显式声明object-fit: cover
cover 和 contain 在头像场景下的实际差异
选 cover 还是 contain，取决于你是否允许裁剪：
-
object-fit: cover：图片等比缩放后完全覆盖容器，超出部分被裁剪。适用于头像、卡片图——人脸居中即可，边缘无关紧要 -
object-fit: contain：图片等比缩放后完整显示在容器内，四周可能留白。不适合头像，因为小图会悬浮在框中央，视觉上像“没对齐”
示例对比：
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden; /* 配合 cover 裁剪更干净 */
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover; /* 关键 */
}
注意：overflow: hidden 不是必须，但能防止某些浏览器（如旧版 Safari）在 border-radius 下出现裁剪毛边。
如何微调裁剪区域（比如让人脸偏上一点）
object-fit: cover 默认从图片中心开始裁剪，但很多头像的视觉焦点在上半部（眼睛、额头）。这时要用 object-position 调整锚点：
-
object-position: center top—— 图片顶部对齐容器顶部，适合人像偏高的构图 -
object-position: 50% 30%—— 横向居中，纵向向上偏移 30%，更精细控制 - 值支持像素、百分比、关键词（
left/center/right,top/center/bottom）
搭配使用：
.avatar img {
object-fit: cover;
object-position: center top;
}
注意：不要对 contain 或 none 乱用 object-position，它只在内容未填满容器时才生效；而 cover 下它控制的是“从哪开始裁剪”。
IE 和旧版 Safari 的兼容性现实
object-fit 在 IE 完全不支持，Safari ≤ 14.1 仅部分支持（尤其是 object-position）。如果你的项目仍需兼容这些环境：
- 别指望纯 CSS 方案，得 fallback 到
<canvas></canvas>绘制裁剪逻辑 - 可用
@supports (object-fit: cover)做渐进增强，给现代浏览器用 CSS，老浏览器走 JS 处理 - Element Plus、Ant Design 等组件库的头像上传组件默认不处理兼容，得自己 patch
真正容易被忽略的点是：即使加了 object-fit，如果父容器没有设置 display: block 或清除浮动，<img> 可能因 inline 元素的基线对齐产生底部空白——加一句 vertical-align: top 或 display: block 更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
