css 长方形或正方形照片显示为圆形头像

1、正方形照片

如果仅仅是正方形照片可直接设置 border-radius：50%解决。

代码

<img src="xxxxxxx" style="border-radius: 50%"/>

 

效果

 

 

 2、长方形照片

如果是长方形，例如各种证件照，如果仅使用border-radius 就会出现照片被拉伸。

此时使用一个div将其遮住的方法实现就可解决

代码

<div style="width: 100px;height: 100px;border-radius: 50%;overflow: hidden;position:relative;">
    <img width="100" height="140" style="position:absolute; top:-20px;" src="xxxxxxx">
</div>

效果

原图：

 

 

 

圆形：