如何更改離子項目頭像的大小？

我正在開發一個應用程序使用離子框架。我需要在側邊菜單標題中顯示圖像。我已經使用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標籤）作爲一個整體，但圖像的大小保持不變。有什麼方法可以增加項目頭像中顯示的圖像的大小？

來源

2016-02-25 Niranjan

你想將圖像縮放？ – Beat

不是，只是爲了增加圖像的顯示尺寸。 – Niranjan

該項目的頭像有一個默認的最大寬度和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 
}

來源

2016-03-09 09:09:42 vairav

謝謝，它的工作。我在ionic.css文件中更改了它。 – Niranjan

使用字體大小到位寬度和高度

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

來源

2016-02-25 09:46:48

如果我使用圖標而不是圖像，這可以工作。但圖像尺寸仍然不會改變。 – Niranjan

如果你使用圖像，那麼你必須給寬度高度，而不是圖標 –

隨着離子3，我發現，當我把它們放進我的網頁SCSS文件其他答案到不行，這不是爲我工作，和是Vairav答案的一個輕微修改。

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

來源

2017-06-23 12:46:14

我只需要它的寬度和高度屬性就可以工作 – mvandillen

謝謝@Zack –

這在我的情況是不夠的：

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

來源

2017-07-27 12:07:28

如何更改離子項目頭像的大小？

回答

相關問題