如何在離子中改變item-avatar的大小？

Question

我正在使用離子框架開發一個應用程序。 我需要在側面菜單標題中顯示圖像。 我使用了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標簽的大小），但圖像大小保持不變。 有沒有辦法增加item-avatar中顯示的圖像的大小？

Answer 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 
}

Answer 2

使用離子3我發現其他答案在我將它們放入我的頁面的SCSS文件時不起作用，這對我有用，並且是對Vairav答案的溫和修改。

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

Answer 3

在Ionic v4中，您只需指定最大值。

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

Answer 4

我發現Ionic 4的最佳解決方案：

ion-avatar { 
    width: 100px;  
    height: 100px;  
}

Answer 5

使用font-size代替寬度和高度

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

Answer 6

這在我的情況下就夠了：

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