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

新手上路,请多包涵

我正在使用离子框架开发一个应用程序。我需要在侧面菜单标题中显示图像。我已经使用 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 标签的大小),但图像大小保持不变。有什么办法可以增加项目头像内显示的图像的大小吗?

原文由 Niranjan 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 308
2 个回答

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

原文由 vairav 发布,翻译遵循 CC BY-SA 3.0 许可协议

我为 Ionic 4 找到的最佳解决方案:

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

原文由 Tom Captain-Dad Pretorius 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题