Práctica de radio de borde de CSS

Actualmente estoy trabajando en el proyecto de una empresa que requiere que el avatar cargado en la aplicación se muestre en el sitio web oficial y requiere una pantalla circular. Hay dos situaciones, una es cargar un avatar cuadrado en la aplicación y la otra es para mostrar el avatar rectangular predeterminado proporcionado por la aplicación.

1. Con respecto a la visualización de avatares cuadrados, una oración simple radio de borde: 50% hecho
2. Con respecto a la visualización de avatares rectangulares, la situación encontrada después de usar esquinas redondeadas es como se muestra en la siguiente figura. La imagen de arriba es un avatar rectangular, y la siguiente imagen es de radio de borde: Después del 50% del avatar, se
   
   encuentra que el radio del borde de CSS es para comprimir la imagen rectangular en un cuadrado. Luego lo cambié a esquinas redondeadas. Solía ​​pensar que el cuadrado del medio se convertía en esquinas redondeadas (riendo y llorando). El jefe pidió mostrar el efecto de la imagen de abajo,
   
   así que haré un proceso aquí y obtendré la imagen. Primero compare el ancho y la altura de la imagen, si no es un cuadrado, use esta imagen rectangular como imagen de fondo, luego cambie el ancho de la imagen de fondo a la longitud y agregue el código

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%

Este es el método que pensé, no sé si tiene alguna buena solución, por favor corríjame