在前几天的工作中，遇到了一个需求，就是写一个宽度自适应的正圆形头像。一开始以为很简单，但是在宽度不确定、图片可能是长方形的情况下，想实现比较好的效果却不是很容易。

最终方案

<div class="container">
  <img class="img" src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF" alt="profile">
</div>

.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

这个办法利用了padding的百分比是基于包含块的宽度来计算的特性。在外层容器上创建了一个宽高比为一比一的正方形。同时因为想要的形状是圆形，用border-radius: 50%; overflow: hidden设置了类似圆形蒙版的效果。最后为了在内部正常显示内容，需要设置外部容器position:relative，这样内部内容才能用position:absolute和top: 0; right: 0; left: 0; bottom: 0;样式铺满正方形。

那么为什么要设置width: 100%;height:100%呢? 因为考虑到图片可能长方形，如果不设置width和height，会出现长方形图片不能铺满整个圆形，出现白色缺口的情况。不是很美观。

这样就可以完成一个自适应宽度的圆形图片啦，不论是放在flex还是grid布局中都不会出现变形或者白色缺口的情况。

用纯css实现一个宽度自适应的圆形图片

最终方案