CSSボーダー半径の練習

CSSボーダー半径について

現在、アプリにアップロードしたアバターを公式サイトに表示し、円形に表示するという会社のプロジェクトに取り組んでいます。アプリに四角いアバターをアップロードする場合と、アプリに正方形のアバターをアップロードする場合の2つの状況があります。アプリが提供するデフォルトの長方形のアバターを表示します。

正方形のアバターの表示に関して、簡単な文の境界線-半径：50％完了
長方形のアバターの表示に関しては、状況は以下の図に示すようにある丸い角を使用した後に見つかった上記画像が矩形アバターであり、そして次の画像が境界半径です。アバターの50％後、それをされている

ことがわかっCSSの境界半径は、長方形の画像を正方形に圧縮することです。それから、それを丸い角に変更しました。以前は、真ん中の正方形が丸い角になっていると思っていました（笑ったり泣いたり）。上司は見せてくれと頼みました。下の画像の効果な

ので、ここで処理を行って画像を取得します。最初に画像の幅と高さを比較します。正方形でない場合は、この長方形の画像を背景画像として使用し、次にの幅を変更します。背景画像の長さに合わせて、コードを追加します

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%

これは私が考えた方法です。良い解決策があるかどうかわかりません。訂正してください。

CSSボーダー半径について

おすすめ