最简圆形头像用border-radius: 50%，但需宽高相等且推荐加object-fit: cover；响应式用aspect-ratio: 1/1，老旧浏览器回退背景图方案；Canvas仅适用于导出或动态处理场景。
用 border-radius 实现最简圆形头像
直接给 <img> 元素设置 border-radius: 50% 就能显示为圆形，前提是宽高相等。这是现代浏览器的通用解法，无需 JS 或额外 DOM。
常见错误是只设 border-radius: 50% 却没控制尺寸——如果图片原始宽高不一致（比如 400×300），即使加了圆角也会变成椭圆。
- 必须显式设置
width和height为相同值（如100px） - 推荐用
object-fit: cover防止拉伸变形，确保主体居中裁剪 - 若父容器有
overflow: hidden，也能兜底，但不如直接设border-radius可靠
<img src="avatar.jpg"
style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover;">
响应式圆形头像怎么保持比例
用固定像素值（如 80px）在移动端会显得太小，而用百分比又容易受父容器影响失真。关键在于锁定宽高等比关系。
纯 CSS 方案：用 aspect-ratio: 1 / 1 替代固定宽高，再配合 border-radius: 50%。它能让元素自动维持正方形比例，适配不同屏幕。
立即学习“前端免费学习笔记（深入）”；
-
aspect-ratio在 Chrome 88+、Firefox 89+、Safari 15.4+ 支持良好；老版本 Safari 需回退到padding-top: 100%技巧 - 避免对
<img>直接设max-width: 100%而不约束高度，否则会破坏圆形 - 若用 Flex/Grid 布局，确保父容器不强制拉伸子项（如
align-items: stretch）
<div style="width: 20%; max-width: 120px;">
<img src="avatar.jpg"
style="width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover;">
</div>
IE11 或老旧安卓 WebView 怎么兼容
border-radius: 50% 在 IE11 是支持的，但 object-fit 不支持，且图片若未加载完成就渲染，可能短暂显示为方形或错位。
稳妥做法是放弃 object-fit，改用背景图方式——把图片设为 <div> 的 background-image，再用 background-size: cover 和 background-position: center 控制裁剪。
- 必须指定
background-repeat: no-repeat，否则重复平铺会出问题 - 不能省略
background-size，IE11 下默认是auto，不会缩放填充 - 如果服务端能生成裁剪后的小图（如 200×200 正方图），优先用这个，比前端裁剪更稳定
<div style="width: 80px; height: 80px; border-radius: 50%;
background-image: url('avatar.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;">
</div>
Canvas 裁剪圆形头像的适用场景
只有当你需要导出圆形 PNG、做动态滤镜、或服务端无法提供正方图时，才值得用 JS + canvas。日常展示完全没必要。
核心逻辑是：创建 canvas → 绘制圆形路径 → 使用 clip() 裁剪 → 再绘制图片。注意图片需加载完成后再操作，否则 canvas 上啥也没有。
-
drawImage()的坐标和尺寸要和arc()的圆心、半径严格对应，否则偏移 - 导出
toDataURL()前最好调用ctx.scale(2, 2)提升清晰度（适配 retina 屏），再设置 canvas 宽高翻倍 - 微信内置浏览器对
canvas的clip()有兼容性问题，建议降级为 SVG 方案
多数项目里，这一步属于过早优化——先用 CSS 解决，真遇到导出需求再补 canvas。
