Как изменить размер элемента-аватара в ионном?

Я разрабатываю приложение с использованием ионной структуры. Мне нужно отобразить изображение в заголовке бокового меню. Я использовал item-avatar, чтобы отобразить изображение. Вот код.

<ion-side-menus>
<ion-side-menu side="left">
    <ion-header-bar class="bar-calm style="height:200px" >
        <div class="list" >
            <a class="item item-avatar">
                <img src="some image source">
                <p>This is an image</p>
            </a>
        </div>
    </ion-header-bar>
</ion-side-menu>

<ion-side-menu-content>
    <ion-list >
        <!-- Links to the pages that must contain the side menu. -->
        <ion-item href="#/side-menu24/page1">Page1</ion-item>
        <ion-item href="#/side-menu24/page2"> Page2</ion-item>
    </ion-list>
</ion-side-menu-content>

Как изменить (увеличить) размер изображения, отображаемого в элементе-аватаре? Мне предложили следующий CSS:

.list .item-avatar{ 
width: 20px !important; 
height : 60px !important;}

Это увеличивает размер содержимого (размер, выделенный тегу div) объекта-аватара в целом, но размер изображения остается неизменным. Есть ли способ увеличить размер изображения, отображаемого внутри элемента-аватара?

Ответы

Ответ 1

У аватара элемента есть свойство max-width и max-height по умолчанию. Вы можете найти его в файле ionic.css. Вы можете либо изменить его там, либо в своем CSS просто добавить:

.item-avatar  {     
width:100% !important;  
height : 100% !important;  
max-width: 100px !important;  //any size
max-height: 100px !important; //any size 
}

Ответ 2

С ионным 3 я нашел, что другие ответы не работают, когда я помещал их в свой файл SCSS на странице, это вместо этого работало для меня и является мягкой модификацией ответа Вайрава.

ion-avatar img  {
width:100% !important;
height : 100% !important;
max-width: 100px !important;  //any size
max-height: 100px !important; //any size
}

Ответ 3

В Ionic v4 вам нужно только указать максимальные значения.

ion-avatar {
    max-width: 25px;
    max-height: 25px;
}

Ответ 4

используйте размер шрифта вместо ширины и высоты

.list .item-avatar
{
font-size:20px; /* as big size as you want */
}

Ответ 5

Этого было достаточно в моем случае:

.item-md ion-avatar img {
    width: auto !important;
    height: auto !important;
}

Ответ 6

Лучшее решение, которое я нашел для Ionic 4:

ion-avatar {

width: 100px;  
height: 100px;

}