【问题标题】:How to prevent auto resize image in ionic card如何防止在离子卡中自动调整图像大小
【发布时间】:2018-09-04 16:17:50
【问题描述】:

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

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

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

【问题讨论】:

标签: css ionic-framework ionic3


【解决方案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)

【讨论】:

  • 谢谢你的努力 nosTa :) 我明白了,但是如果窗口大小发生变化,那么我的 png 又会变丑吗?因为我的png太小了?
  • 如果你想保持大小,无论发生什么,都以像素为单位。宽度:300px;高度:300 像素。或者做一个最大宽度 30% 可能。取决于你想做什么
猜你喜欢
  • 2016-08-10
  • 2019-09-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-11-16
  • 2014-04-04
  • 2019-03-14
  • 2018-10-11
相关资源
最近更新 更多