离子2：化身形状错误

Question

为什么我的头像图像会像这样渲染？我只是将照片分配给Ionic docs 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>

这是一个傻瓜：

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

感谢。

Answer 1

这是因为图片的大小（应该是像45px x 45px或300px x 300px这样的正方形）

如果您更改此图像，则可以看到头像已正确呈现：

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

如果您仍想使用不是正方形的图片，如果您在页面样式中添加此图片，则应修复此问题：

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