Ионный 2: аватар неправильной формы

Почему изображение моего аватара выглядит так? Я просто назначая фото к стандартной разметке от ионического документы V2 т.д .:Ионный 2: аватар неправильной формы

<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

Спасибо.

источник

2016-06-13 Dave

Вопросы, требующие помощи по коду, должны содержать кратчайший код, необходимый для его воспроизведения ** в самом вопросе **, предпочтительно в [** Stack Snippet **] (https://blog.stackoverflow.com/2014/ 09/введение-работоспособной-на JavaScript CSS-и-HTML-код-фрагменты /). См. [** Как создать минимальный, полный и проверенный пример **] (http://stackoverflow.com/help/mcve) –

Можете ли вы создать плункер с этим кодом? Таким образом было бы легче узнать, что там происходит ... – sebaferreras

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

Это из-за размера изображения (должно быть квадратным, как 45px x 45px или 300px x 300px)

Если вы измените свой образ для этого, вы можете увидеть аватар оказанными надлежащим образом:

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

Если вы все еще хотите использовать изображение, которое не является квадрат, если добавить это в ваших стилях страниц, вопрос должен быть фиксированными:

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

источник

2016-06-15 18:49:08 sebaferreras

эй снова, да, я подумал, что это может сработать, но это искажает соотношение сторон. Что будет лучше, если есть способ центрировать изображение, а не деформировать его. – Dave

Я попробовал 'Ион-аватар', я получаю то же изображение, что и вопрос, вот мой элемент проверки идет' .item-ios ion-avatar img { max-width: 3.6rem; max-height: 3.6rem; border-radius: 1.8rem; } ' –

Я попытался css, как вы это делали, но бесполезно. Я пытаюсь реализовать ион-аватар, созданный ионным эскизом, заданный ионной командой, но я получаю обведенное изображение –

Ионный 2: аватар неправильной формы

ответ

Смежные вопросы