border-radius: 50% 仅在元素宽高相等时生成正圆；若宽高不等（如120px×80px），则生成椭圆。确保正圆需用aspect-ratio: 1/1、padding-bottom: 100%或等值宽高，并配合object-fit: cover和overflow: hidden。
border-radius: 50% 为什么有时画不出正圆
直接写 border-radius: 50% 不等于一定得到圆形头像——它只在元素宽高相等时才生效。如果容器是 width: 120px; height: 80px，那 border-radius: 50% 实际计算的是水平方向 60px、垂直方向 40px 的椭圆半径，结果必然是椭圆。
常见错误现象：
- 小屏下头像明显压扁，尤其用
vw或%设宽高但没约束高宽比 - 图片源是 4:3 或 16:9，强制设等宽高等尺寸后脸被横向拉伸
- 用
img标签但忘了加object-fit: cover，内容溢出或留白
必须保证正方形显示区域的三种写法
核心是让浏览器知道“这个盒子得是正的”，不能只靠人眼判断。
-
aspect-ratio: 1 / 1（推荐）：现代方案，Chrome 88+ / Firefox 89+ / Safari 15.4+ 全支持，一行解决，响应式天然友好 -
padding-bottom: 100%技巧：父容器设position: relative，子::before或内层div用padding-bottom撑高，再绝对定位内容——兼容旧浏览器但结构更重 - 固定像素 + 等值宽高：如
width: 64px; height: 64px，适合图标类小头像，但无法随视口缩放
图片填充不拉伸的关键配置
即使容器是正方形，原始图不是正方形也会变形。必须用图像裁剪控制逻辑，而不是依赖尺寸硬塞。
-
object-fit: cover是 img 标签的标配，配合object-position: center（默认就是 center，显式写更稳妥）确保人脸居中且填满 - 不用
img？改用背景图时，对应写background-size: cover; background-position: center; - 别漏
overflow: hidden——虽然border-radius会裁剪，但某些旧版 Safari 或复杂嵌套下仍可能漏边
响应式圆形头像的最小可行代码
以下这段能跑通所有现代浏览器，最大不超过 8rem，且随屏幕缩小自动缩放：
.avatar {
width: min(8rem, 20vmin);
aspect-ratio: 1 / 1;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
HTML 中直接用：
注意点：vmin 单位取视口宽高较小值，避免横屏手机上头像过大；min() 函数限制上限，防止桌面端撑满半屏。这两项一加，就和“固定像素”彻底划清界限了。
真正容易被忽略的，是把 aspect-ratio 当成可选优化——它才是现代响应式圆形头像的基石。没有它，其他所有设置都只是在修修补补。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
