时间戳

首页 > 解决方案 > 如何防止在离子卡中自动调整图像大小

css - 如何防止在离子卡中自动调整图像大小

问题描述

我正在做一个项目，我只需要在我的应用程序主页中制作这种类型的导航菜单。

在此处输入图像描述

但是，如果我将 png 图像用于获得自动缩放并变得丑陋的卡片。这就是我所说的

在此处输入图像描述

这个新闻图标 png 是 50px 图像。我想将其显示为小图标。我没有使用 ionic 提供的图标，因为它们的图标列表非常有限。因此我使用了其他图标。如果我使用离子图标，我如何根据需要调整其图标的大小？

这是我的代码

<ion-content padding id="myPage">
        <ion-grid>
            <ion-row>
                <ion-col col-6>
                    <ion-card color="secondary">
                        <img src="../../assets/imgs/News_50px.png" class="" alt="" />
                        <ion-card-content text-center>NEWS</ion-card-content>
                    </ion-card>
                </ion-col>
                <ion-col col-6>
                    <ion-card>
                        <img src="../../assets/icon/icons8-handshake-96.png" class="" alt="" />
                        <ion-card-content>
                        </ion-card-content>
                    </ion-card>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-content>

我可以做些什么来使我的应用看起来像上面提到的应用外观，我可以根据需要调整卡片的高度和宽度吗？

标签： cssionic-frameworkionic3

解决方案

如果你使用你的 png，只需使用 css。

例如：

ion-card img { width: 20%; height: 20%; }

对于这种方法，图像应该具有相同的初始宽度和高度，否则您需要在每个图像上使用自定义类并将其设置为您需要的大小。

如果你想使用离子图标，你可以用字体大小给它们另一个大小，例如 1.5em。比你可以检查窗口的大小并在 css 中调整它的大小。如果宽度 > 800 px，字体大小：1.8em 等等......（https://www.w3schools.com/css/css_rwd_mediaqueries.asp）

推荐阅读