border-radius: 50% 在响应式场景下易失效，因其水平方向取宽的50%、垂直方向取高的50%，宽高不等时必成椭圆；需配合 aspect-ratio: 1、overflow: hidden、object-fit: cover 及现代单位（如vw）并兼顾 Safari 渲染精度与兼容降级。
border-radius: 50% 为什么在响应式场景下容易失效
因为 border-radius: 50% 的百分比是分别按元素的 width 和 height 计算的：水平方向取宽的一半，垂直方向取高的一半。一旦宽高不等（比如只设 width: 15vw 却没约束高度），结果就是椭圆，不是头像要的正圆。
常见错误现象包括：
- 图片在小屏上被压扁，在大屏上拉长
- 用
max-width: 100%+height: auto后容器高度塌陷 - 父容器有
padding或border导致实际内容区宽高失衡
用 vw 单位 + aspect-ratio 实现真正自适应的正圆
推荐组合写法简洁且语义清晰，现代浏览器支持良好：
.avatar-wrapper {
width: 15vw;
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
}
.avatar-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
关键点说明：
立即学习“前端免费学习笔记（深入）”；
-
width: 15vw让尺寸随视口缩放，aspect-ratio: 1强制等宽高等比，比padding-bottom: 100%更直观、可继承、不依赖定位 -
overflow: hidden必须加在容器上，否则border-radius对内部图片无裁剪效果 -
object-fit: cover确保图片居中缩放并填满，避免留白或拉伸变形
老安卓和 iOS Safari 的兼容 fallback 方案
aspect-ratio 在 Chrome ≤ 87、Safari ≤ 15.4、旧版 Android WebView 中不支持，需降级处理：
- 用
padding-bottom: 100%+position: relative+position: absolute子元素撑高 - 或直接回退到固定尺寸工具类（如
.avatar-md { width: 48px; height: 48px; }），配合媒体查询适配 - 避免用
transform: scale()模拟缩放，会导致像素模糊或锯齿加剧
特别注意：iOS Safari 渲染 subpixel 边缘较弱，15vw 在某些缩放比例下可能算出非整数像素值，导致圆角边缘发虚。可加 -webkit-backface-visibility: hidden 触发硬件加速缓解。
用 background-image 替代 img 标签时的关键配置
当 HTML 结构不可改（比如只能注入 CSS），或需兼容 IE11/老 WebView 时，background-image 是更稳的选择：
.avatar-bg {
width: 15vw;
aspect-ratio: 1;
border-radius: 50%;
background-image: url(avatar.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
容易踩的坑：
- 漏掉
background-position: center→ 裁剪中心偏移，人脸可能被切掉 - 没设
aspect-ratio或等宽高 → 容器仍是矩形，border-radius只能圆角不能成圆 - 误以为
border-radius会自动裁背景图 → 实际需靠background-clip: padding-box显式控制（但多数情况overflow: hidden已够用）
事情说清了就结束。真正难的不是写那行 border-radius: 50%，而是它依赖的整个盒模型上下文是否可控——宽高、图片加载时机、设备像素比、甚至 Safari 的私有渲染行为，漏掉一个，圆就偏了。
