圆形头像需容器宽高相等且设border-radius: 50%，图片用object-fit: cover防变形；非正方形图应配合overflow: hidden容器裁剪；retina屏需srcset提供多分辨率图并预留宽高防布局抖动。

用 border-radius 直接切出圆形，但必须满足宽高相等

头像变圆的核心不是“画圆”，而是把一个正方形图片的四个角完全裁掉。CSS 的 border-radius: 50% 只有在元素宽高一致时才真正生成正圆；如果 width 和 height 不同，它会产出椭圆。

实操建议：

• 给图片容器（比如 <img> 或包裹它的 <div>）明确设置相等的 <code>width 和 height，例如 width: 100px; height: 100px;
• 加上 border-radius: 50%;，别写成 100% 或 max(50%, 50%)——只有 50% 是标准解
• 若用 <img> 标签，记得加 object-fit: cover;，否则图片可能被拉伸或留白

图片本身不是正方形？用 object-fit + 容器裁剪更可靠

实际开发中，用户上传的头像常是 4:3、16:9 甚至竖图。硬调 width/height 会导致变形，这时不能只靠 border-radius。

推荐组合方案：


Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
• 用一个固定尺寸的 <div> 作为容器，设 <code>border-radius: 50% 和 overflow: hidden;
• 把 <img> 放进去，设 width: 100%; height: 100%; object-fit: cover;
• 避免用 background-image + border-radius，因为部分旧版 Safari 对背景图圆角裁剪支持不稳定

<div style="width: 80px; height: 80px; border-radius: 50%; overflow: hidden;">
  @@##@@
</div>

需要适配 Retina 屏？注意图片分辨率和缩放陷阱

在高清屏上，100px 宽高的 <img src="avatar.jpg" style="max-width:90%"> 若只提供 100×100 像素的源图，会模糊。但盲目放大又可能让普通屏加载大图浪费带宽。

稳妥做法：

• 准备至少两套尺寸：如 avatar-200x200.jpg（用于 2x 屏）和 avatar-100x100.jpg（用于 1x 屏）
• 用 <img> 让浏览器自动选
• 别依赖 CSS 缩放（如 transform: scale(0.5)）来“假装高清”，border-radius 在缩放后可能出现锯齿或边缘发虚

用 <picture></picture> 或现代 srcset 时，border-radius 依然生效，但要注意加载时机

图片异步加载完成前，容器可能是空白或塌陷状态，导致圆角没效果或布局跳动。

关键控制点：

• 给容器设固定宽高（不能是 auto 或 fit-content），哪怕图片还没加载
• 加 loading="lazy" 没问题，但别省略 width 和 height 属性（HTML 属性，非 CSS）——现代浏览器能据此预留空间
• 如果用 JS 动态插入头像，确保 DOM 插入后容器已具备样式，否则首次渲染可能漏掉圆角
实际项目里最常被忽略的是：容器宽高不一致却强行加 border-radius: 50%，结果得到一个蛋形；或者忘了 object-fit: cover，导致头像被压扁或只显示左上角。这两处一错，整个“圆形头像”就只是个视觉错觉。