如何利用CSS aspect-ratio实现移动端自适应正方形头像

aspect-ratio: 1 / 1 是最直接可靠的现代方案，但需 safari 15.4+ 等新浏览器支持；旧环境必须 fallback 到 padding-bottom: 100% + height: 0 + absolute 定位的双层结构方案。

如何利用css aspect-ratio实现移动端自适应正方形头像_解决布局难点

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%;
}