aspect-ratio: 1 / 1 是最直接可靠的现代方案，但需 Safari 15.4+ 等新浏览器支持；旧环境必须 fallback 到 padding-bottom: 100% + height: 0 + absolute 定位的双层结构方案。
aspect-ratio 是当前实现移动端自适应正方形头像最直接、最可靠的方式，前提是目标设备运行的是现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+、iOS Safari 15.4+）。如果你的用户基本覆盖 2022 年后发布的主流机型，aspect-ratio: 1 / 1 就能一劳永逸；否则仍需 fallback 到 padding-bottom 方案。
为什么不用 height: 100% 或 width: 100% 单独控制？
单纯设 width: 100% + height: 100% 会让头像强行拉伸变形，尤其当父容器宽高比不是 1:1 时（比如窄屏下父容器是长条形）；而只设 width: 100% + height: auto 只能保持原始图片比例，无法强制为正方形。真正需要的是「无论父容器多宽，高度必须严格等于宽度」——这正是 aspect-ratio 的职责。
如何写一个带裁剪和圆角的正方形头像？
关键点在于：把 aspect-ratio 加在包裹容器上，而不是直接加在 <img> 上（避免部分旧版 Safari 对 img 元素支持不稳定）。
- 用
div包一层，设aspect-ratio: 1 / 1和width: 100%（或max(40px, 15%)等响应式单位） -
<img>设width: 100%、height: 100%、object-fit: cover实现居中裁剪 - 圆角直接加在
<img>上：border-radius: 50%，不影响比例逻辑
.avatar-wrapper {
width: max(40px, 15%);
aspect-ratio: 1 / 1;
}
.avatar-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
兼容旧浏览器时怎么 fallback？
不能只靠 @supports 检测就完事——某些 Android WebView（如 UC 内核）虽声明支持 aspect-ratio，但实际渲染异常。稳妥做法是双写：
立即学习“前端免费学习笔记（深入）”；
- 先写
padding-bottom: 100%+height: 0的经典方案作为基础 - 再用
@supports (aspect-ratio: 1 / 1)覆盖掉 padding 相关样式 - 确保内部
<img>始终用position: absolute或 flex 填充，避免 fallback 时内容塌陷
注意：aspect-ratio 和 height 同时设具体值会互相冲突，fallback 代码里要显式重置 height 和 padding。
移动端小屏下头像过小怎么办？
纯 width: 100% 在超窄视口（比如 iPhone SE）可能导致头像只有 24px，看不清细节。这不是 aspect-ratio 的问题，而是单位选择问题：
- 避免单一使用
%，改用minmax(40px, 15%)或max(40px, 12vw) - 如果用
vw，注意某些安卓浏览器对vw的计算包含地址栏高度，导致缩放抖动，此时max()更稳 - 不要依赖媒体查询硬切尺寸，
max()和min()函数本身已足够应对连续变化的视口
真正容易被忽略的，是 aspect-ratio 在 <img> 上的兼容性波动——即使浏览器版本达标，某些 PWA 或 WebView 容器仍可能忽略它。上线前务必在真机 WebView 环境中实测，而不是只信桌面 DevTools 的模拟结果。
