css的border-radius实践

最近在做公司的项目，要求在官网展示app端上传的头像且要求圆形展示，有这样两种情况，一是在app端上传的是正方形的头像，一是展示app提供的默认的长方形头像

1. 关于正方形头像的展示，很简单 一句border-radius：50%搞定
2. 关于长方形头像的展示，用了圆角之后发现的情况如下图，上图为长方形的头像，下图为border-radius：50%之后的头像
   
   发现css的border-radius是把长方形的图片压缩成正方形之后又换成圆角的，我之前一直以为是取中间的正方形再变成圆角的（笑哭）,l老板要求展示成一个下图的效果
   
   所以我这边做个处理，获取到图片之后先对比图片的宽高，假如不是正方形的话，就把这个长方形图片作为背景图片，然后把背景图片的宽变长，上代码

this.$nextTick(()=>{
    
    
    var img = new Image()
     img.url = this.info.avatar
     img.onload = function(){
    
    
         console.log(img.width)
         if(img.width!=img.height){
    
    
             that.ifCircle = false
         }else{
    
    
             that.ifCircle  = true
         }
     }
})

//下面的vue的展示部分
<div class="photo" v-show="ifCircle">
   <img :src="info.avatar" alt="" class="user-photo"> 
</div>
<div class="photoBox" v-show="!ifCircle" :style="{backgroundImage:'url('+ info.avatar}"></div>

/**下面是css对背景图片的处理**/
.photoBox
   width l(78)
   height l(78)
   border-radius 50%
   background-size: 121% 105%;
   background-position: center center;
   border-radius: 50%;
.photo
   width l(78)
   height l(78)
   position relative
   .user-photo
       border-radius 50%

这是本人想到的办法，不知道大家有啥好办法吗，欢迎指正哦