イオン2：アバターの間違った形状

Question

なぜ私のアバター画像はこのようにレンダリングされますか？私はちょうどイオンドキュメントV2例えばから標準マークアップに写真を割り当てることです。：

<ion-menu id="leftMenu" [content]="content" side="left"> 
    <ion-content> 
    <ion-item class="menu-header"> 
     <ion-avatar item-left class="menu-avatar"> 
      <img src="https://www.placecage.com/200/300"> 
     </ion-avatar> 
     <h2>Joe Bloggs</h2> 
    </ion-item>  
    <ion-list> 
     <ion-item> 
     <ion-icon name="home" item-left></ion-icon>Home 
     </ion-item> 
     <ion-item> 
     <ion-icon name="home" item-left></ion-icon>Home 
     </ion-item> 
     <ion-item> 
     <ion-icon name="home" item-left></ion-icon>Home 
     </ion-item>  
    </ion-list> 
    </ion-content> 
</ion-menu> 

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav> 

ここplunkrです：

https://plnkr.co/edit/EGDhKzSyaI3WZugldn4W?p=preview

おかげで。それが原因で、画像の大きさのだ

Answer 1

（45px x 45pxまたは300px x 300pxのような四角形でなければなりません）

あなたはこの1のためのあなたのイメージを変更する場合は、アバターが正しくレンダリングされ見ることができます。

<img src="https://www.placecage.com/300/300"> 

あなたはまだあなたが問題が修正されなければならないあなたのページスタイルでこれを追加する場合、正方形のない画像を使用したい場合：

ion-avatar img { 
    width: 100% !important; 
    height: 100% !important; 
}