根本原因是浏览器按宽高各自50%计算圆角半径，宽高不等时必成椭圆；必须用aspect-ratio:1或aspect-square维持1:1比例，配合overflow-hidden与object-fit:cover三者缺一不可。
为什么 border-radius: 50% 在响应式场景下容易变椭圆
根本原因不是写错了，而是浏览器按 width 和 height 各自的 50% 计算圆角半径：宽高不等时，横向半径和纵向半径就不同，结果必然是椭圆。常见于只设 width: 100% 却没约束高度、或用 max-width: 100% + height: auto 的写法——图片原始比例一乱，容器立刻失方。
必须确保头像容器（<img> 或其父 <div>）在任意屏幕宽度下都维持 1:1 宽高比。靠 padding-top hack 或 JS 动态计算已过时，现代方案优先用 aspect-ratio: 1，兼容性不足时再降级。
用 aspect-square（Tailwind）或 aspect-ratio: 1 控制容器比例
直接给容器设 aspect-ratio: 1 是最直观的方式，但 Safari 旧版本（≤15.4）不支持，会直接忽略，导致塌陷或拉伸。Tailwind 的 aspect-square 类更可靠——它在支持原生 aspect-ratio 的浏览器中用 aspect-ratio: 1，不支持时自动 fallback 到 padding-top: 100% + position: relative 的经典方案。
-
aspect-square必须作用于**容器元素**（如<div class="aspect-square">），不能直接加在<img>上——替换元素不响应aspect-ratio - 若用原生 CSS，需配合
width: 100%或固定值，否则aspect-ratio不生效 - 别混用
max-w-16和w-full：前者限制最大宽度，后者要求占满，冲突会导致比例失效
overflow-hidden 和 object-fit: cover 必须成对出现
只加 rounded-full 或 border-radius: 50% 是无效的——圆角只是“框”变圆，内容仍可能溢出或拉伸。关键三要素缺一不可：正方形容器 + 裁剪边界 + 填充策略。
立即学习“前端免费学习笔记（深入）”；
-
overflow-hidden必须和rounded-full（或border-radius: 50%）加在同一元素上；若rounded-full在<img>上，overflow-hidden也得在它上面，不能只加在父容器 -
object-fit: cover是底线：它强制填满容器并居中裁剪，避免人脸被压缩或留白；object-contain会留白，fill会拉伸，都不适合头像 - 响应式断点（如
sm:w-14 sm:h-14）下，sm:overflow-hidden和sm:rounded-full必须同步添加，漏掉任一都会破圆
兼容老浏览器时改用 background-image 方案
当目标环境包含 IE11 或 Android 4.x WebView 时，object-fit 不可用，aspect-ratio 更是完全不支持。此时唯一稳定方案是放弃 <img> 标签，改用 background-image。
- 把图片 URL 写进
background-image，用background-size: cover替代object-fit: cover - 必须配
background-position: center，否则裁剪中心偏移，人脸可能被切掉一半 -
border-radius: 50%直接加在 div 上即可生效，无需额外处理 display 或 overflow（除非父容器有干扰） - 缺点是无法通过 JS 读取
naturalWidth等属性，SEO 和可访问性略弱，但视觉稳定性远高于 img + polyfill
真正难的不是“怎么画圆”，而是让每个头像在 flex 布局里不被拉伸、在图片尺寸不可控时不变形、在 Safari 旧版里不塌陷——这三个点任何一个没兜住，用户就会看到椭圆或白边。
