如何更改离子项目头像的大小？

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

如何更改离子项目头像的大小？

回答

相关问题