【问题标题】:replacing <img> to <ion-img> and images are very small将 <img> 替换为 <ion-img> 并且图像非常小
【发布时间】:2017-04-07 16:59:20
【问题描述】:

我按照virtual scroll 的指导将我的列表更新为虚拟列表。

一切都很好,但是当我将 card background images&lt;img&gt; 转换为 &lt;ion-img&gt; 时,在我的卡片上显示为背景图像的图像非常小。我有什么遗漏吗?

【问题讨论】:

    标签: ionic-framework ionic2


    【解决方案1】:

    ion-img 文档中查看Image dimensions section

    通过预先提供图像尺寸,Ionic 能够准确地确定图像在视口中的位置,这有助于仅延迟加载可见的图像。图像尺寸可以设置为属性、内联样式或外部样式表。使用哪种设置尺寸的方法并不重要,但重要的是要以某种方式为每个 ion-img 指定一个确切的尺寸。

    如果您使用ion-img,则需要通过属性或css样式设置要显示的图像的高度和宽度。

    【讨论】:

    • 谢谢,如果我希望图像像以前使用&lt;img&gt; 那样使用标准的最大宽度和高度,我尝试了width="100%" height="100%",但它没有用。我有一个动态图像列表,我想要的只是让他们自动获取当前的宽度和高度,就像 &lt;img&gt; 之前所做的那样,指定 height="100%" width="100%" 对我来说听起来不错,但它没有任何想法?
    • 您希望它具有特定的尺寸或根据每个图像而变化? ion-img 需要一定的大小..如果您能够检索图像尺寸以及源..您可以动态设置
    • 我希望它根据每个图像而有所不同。从你那里明白,现在我必须自己计算。我觉得很奇怪,这就是人们通常使用ion-img 的方式吗?他们要么有一个固定的大小,要么计算它?
    • 我想这是与 virtualscroll 和优化的权衡之一。你可以使用 img 并尝试..
    • @SurajRao 如何动态获取维度?如果来自firebase存储服务器怎么办?知道怎么做吗? this link 是我的问题
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-12-04
    • 2014-10-09
    • 2012-01-05
    • 2020-12-07
    • 2015-12-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多