web-dev-qa-db-fra.com

Comment changer la taille de item-avatar dans ionic?

Je développe une application utilisant un cadre ionique. J'ai besoin d'afficher une image dans l'en-tête du menu latéral. J'ai utilisé item-avatar pour afficher l'image. Voici le 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>

Comment puis-je changer (augmenter) la taille de l'image affichée dans l'article avatar? On m'a suggéré le CSS suivant:

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

Cela augmente la taille du contenu (taille allouée à la balise div) de l'élément avatar dans son ensemble, mais la taille de l'image reste la même. Est-il possible d'augmenter la taille de l'image affichée dans l'objet-avatar?

htmlcssionic-framework
11
Niranjan

L'avatar de l'élément a une propriété par défaut max-width et max-height. Vous pouvez le trouver dans le fichier ionic.css. Vous pouvez le changer ici ou dans votre CSS simplement en ajoutant:

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

Avec ionic 3, les autres réponses ne fonctionnaient pas lorsque je les ai insérées dans le fichier SCSS de ma page. Cela a fonctionné pour moi et constitue une légère modification de la réponse de Vairav. 

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

utilisez la taille de police au lieu de la largeur et de la hauteur

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

Dans Ionic v4 il vous suffit de spécifier les max.

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

Cela suffisait dans mon cas:

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