CSS-Randradius-Praxis

Ich arbeite derzeit an einem Unternehmensprojekt, bei dem der in die App hochgeladene Avatar auf der offiziellen Website angezeigt werden muss und eine kreisförmige Anzeige erforderlich ist. Es gibt zwei Situationen: Die eine besteht darin, einen quadratischen Avatar in die App hochzuladen, und die andere um den von der App bereitgestellten rechteckigen Standard-Avatar anzuzeigen.

1. In Bezug auf die Anzeige von quadratischen Avataren ein einfacher Satz Randradius: 50% erledigt
2. In Bezug auf die Anzeige von rechteckigen Avataren ist die Situation nach Verwendung abgerundeter Ecken wie in der folgenden Abbildung dargestellt. Das obige Bild ist ein rechteckiger Avatar, und das folgende Bild ist ein Randradius: Nach 50% des Avatars wird dies
   
   festgestellt Der Randradius von CSS besteht darin, das rechteckige Bild in ein Quadrat zu komprimieren. Dann habe ich es in abgerundete Ecken geändert. Früher dachte ich, dass das Quadrat in der Mitte in abgerundete Ecken verwandelt wurde (lachend und weinend). Der Chef bat darum, es zu zeigen den Effekt des Bildes unten,
   
   also werde ich hier einen Prozess durchführen und das Bild erhalten. Vergleichen Sie zuerst die Breite und Höhe des Bildes. Wenn es kein Quadrat ist, verwenden Sie dieses rechteckige Bild als Hintergrundbild und ändern Sie dann die Breite von das Hintergrundbild auf Länge bringen und den Code hinzufügen

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%

Dies ist die Methode, an die ich gedacht habe. Ich weiß nicht, ob Sie gute Lösungen haben. Bitte korrigieren Sie mich