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像素，字体大小：1.8em，依此类推...（https://www.w3schools.com/css/css_rwd_mediaqueries.asp）

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

1 个答案: