web-dev-qa-db-ja.com

アイテムアバターのサイズをionicで変更する方法は？

ionicフレームワークを使用してアプリを開発しています。サイドメニューヘッダーに画像を表示する必要があります。画像を表示するには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タグに割り当てられたサイズ）が増加しますが、画像サイズは同じままです。アイテムアバター内に表示される画像のサイズを大きくする方法はありますか？

htmlcssionic-framework
11
Niranjan

アイテムアバターには、デフォルトの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 
}
17
vairav

ionic 3を使用して、他の回答をページのSCSSファイルに入れると機能しないことがわかりました。これは代わりに機能します。

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

Ionic v4では、最大値のみを指定する必要があります。

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

Ionic 4で見つけた最適なソリューション：

ion-avatar { 
    width: 100px;  
    height: 100px;  
}
2
Tom Captain-Dad Pretorius

幅と高さの代わりにfont-sizeを使用します

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

私の場合、これで十分でした：

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