border-radius: 50% 要实现正圆，必须确保宽高严格相等且比例恒为1:1；仅设width: 100%而height: auto会导致椭圆，因50%分别按不等宽高计算，需配合固定宽高、aspect-ratio: 1或容器overflow: hidden等约束。
border-radius: 50% 本身不响应式，真正决定“是否为正圆”的是宽高比是否恒为 1:1 —— 所以响应式圆形头像的核心不是圆角值，而是如何让容器或图片始终维持正方形比例。
为什么 width: 100% + border-radius: 50% 在移动端常失效
常见错误是只写 width: 100% 却留 height: auto，此时浏览器按原始图比例撑高，border-radius: 50% 的“50%”分别作用于不同数值的宽和高，结果必然是椭圆。更隐蔽的问题是：父容器若用 flex 或 grid 且未约束自身比例，子 img 就会随内容拉伸失真。
- 绝对不要依赖
height: auto来维持圆角形状 - 避免对
img直接设max-width: 100%而不配等高约束 - 测试时别只看 Chrome DevTools 响应式模式——真机 Safari 对小尺寸（4px 或直接上
50%
aspect-ratio: 1 / 1 是现代解法，但得知道它在哪不工作
aspect-ratio 能让元素自动保持正方形，配合 border-radius: 50% 和 object-fit: cover 就是当前最干净的响应式头像方案。但它在 Safari 15.3 及更早、Firefox 88 及更早中不支持。
- 可用回退方案：
padding-top: 100%+height: 0+ 绝对定位图片（仅适用于div容器包裹img） - 注意：
aspect-ratio对img元素本身有效，但若父容器有transform，某些旧版 Chrome 下可能触发布局 bug - 邮件场景（Gmail/Outlook Web）完全不支持
aspect-ratio和object-fit，唯一可靠方式是提前提供正方形源图（如 200×200），再用固定width/height
用 object-fit: cover 前必须确认三件事
object-fit: cover 不是万能胶——它只在 img 有明确宽高（CSS 设置，非 HTML width/height 属性）时才生效。否则行为等同于 fill，照样拉伸变形。
- 必须显式设置
width和height（哪怕用100%，也得确保父容器尺寸确定） - 必须加
display: block，否则部分浏览器下object-fit在行内元素上表现异常 - 若头像需点击跳转，
object-fit不影响语义，但背景图方案（background-image）需手动加tabindex="0"和键盘事件支持
老浏览器兜底：为什么 background-image 方案仍不可替代
IE11、部分安卓 WebView、以及所有邮件客户端，都不支持 object-fit。这时用 div + background-image 是唯一稳定路径，但要注意它绕过了图片加载生命周期 —— 无法监听 onload 或 onerror，fallback 图片只能靠 CSS background-image 多层叠加或 JS 动态注入。
- 必须写全：
background-size: cover+background-position: center+background-repeat: no-repeat - URL 路径是相对于 CSS 文件位置，不是 HTML，容易 404
- 如果头像来自用户上传且尺寸不可控，
background-image无法自动适配 DPR（设备像素比），而img支持srcset
真正麻烦的从来不是写 border-radius: 50% 这一行，而是判断：此刻该信浏览器的自动裁剪，还是得自己用 overflow: hidden 加一层保险；该用 aspect-ratio 追求简洁，还是退回 padding-top 保兼容；该坚持 img 的语义和加载控制，还是换 background-image 换稳定性。这些选择没有标准答案，只取决于你面对的是哪个终端、哪类用户、哪条发布通道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
