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

Question

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

但是，如果我将 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>

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

Answer 1

如果您使用 png 格式，只需使用 css。

例如：

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

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

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