How to change the size of item-avatar in ionic?

Question

I am developing an app using ionic framework. I need to display an image in the side menu header. I have used item-avatar to display the image. Here is the code.

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

How do I change(increase) the size of the image displayed in the item-avatar? I was suggested the following CSS:

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

This increases the content size(size allocated to the div tag) of the item-avatar as a whole but the image size remains the same. Is there any way to increase the size of the image displayed inside the item-avatar?

Answer 1

The item avatar has a default max-width and max-height property. You can find it in the ionic.css file. You can either change it over there or in your CSS just add:

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