Html 如何更改离子中物品头像的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35623577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the size of item-avatar in ionic?
提问by Niranjan
I am developing an app using ionic framework. I need to display an image in the side menu header. I have used item-avatarto display the image. Here is the code.
我正在使用离子框架开发应用程序。我需要在侧边菜单标题中显示图像。我已经使用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>
How do I change(increase) the size of the image displayed in the item-avatar? I was suggested the following CSS:
如何更改（增加）物品头像中显示的图像大小？有人建议我使用以下 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?
这会增加整个项目头像的内容大小（分配给 div 标签的大小），但图像大小保持不变。有没有办法增加物品头像内显示的图像的大小？
回答by vairav
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:
项目头像具有默认的 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
}
回答by Zack Pearson-Smith
With ionic 3 I found the other answers to not work when I put them into my page's SCSS file, this instead worked for me, and is a mild modification of Vairav's answer.
使用 ionic 3，当我将它们放入页面的 SCSS 文件时，我发现其他答案不起作用，这对我有用，并且是对 Vairav 答案的温和修改。
ion-avatar img {
width:100% !important;
height : 100% !important;
max-width: 100px !important; //any size
max-height: 100px !important; //any size
}
回答by Tom Captain-Dad Pretorius
Best solution I found for Ionic 4:
我为Ionic 4找到的最佳解决方案：
ion-avatar {
width: 100px;
height: 100px;
}
回答by Grant
In Ionic v4you only need to specify the max's.
在Ionic v4 中，您只需要指定最大值。
ion-avatar {
max-width: 25px;
max-height: 25px;
}
回答by Anubhav pun
use font-size in place of width and height
使用字体大小代替宽度和高度
.list .item-avatar
{
font-size:20px; /* as big size as you want */
}
回答by Martin Schneider
This was enough in my case:
就我而言，这已经足够了：
.item-md ion-avatar img {
width: auto !important;
height: auto !important;
}
