css - 如何防止 ionic 卡中的自动调整图像大小

Question

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

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

这个新闻图标 png 是 50px 图像。我想将其显示为小图标。我没有使用 ionic 提供的图标，因为它们的图标列表非常有限。因此我使用了其他图标。如果我使用 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%; }

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

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