如何在离子中改变item-avatar的大小?

问题描述 投票:11回答:6

我正在使用离子框架开发一个应用程序。我需要在侧面菜单标题中显示图像。我使用了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中显示的图像的大小?

html css ionic-framework
6个回答
17
投票

项目头像具有默认的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 
}

10
投票

使用离子3我发现其他答案在我将它们放入我的页面的SCSS文件时不起作用,这对我有用,并且是对Vairav答案的温和修改。

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

4
投票

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

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

2
投票

我发现Ionic 4的最佳解决方案:

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

1
投票

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

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

0
投票

这在我的情况下就够了:

.item-md ion-avatar img {
    width: auto !important;
    height: auto !important;
}
© www.soinside.com 2019 - 2024. All rights reserved.