时间戳

首页 > 解决方案 > Ionic 5 应用程序的 IOS 中的图像高度被拉伸

css - Ionic 5 应用程序的 IOS 中的图像高度被拉伸

问题描述

在我的 Ionic 5 应用程序中，我遇到了 IOS 图像大小的问题。我只是在ion-card. 肖像图像很好，但不是风景。

HTML：

<ion-card>
<ion-row class="ion-justify-content-start">
<img [src]=path alt=""/>
</ion-row>
</ion-card>

SCSS：

img {
    max-height: 70vw;
    border-radius: 10px !important;
}

预期结果如下。浏览器和 android 显示正确的大小。 在此处输入图像描述

下面是IOS镜像。高度被拉长。 在此处输入图像描述

编辑： 我根据建议通过更改scss属性进行了检查，但问题不在于 imgscss属性，而是ion-row. 我在里面放了一张图片，在外面放了一张没有 scss 标签的 ion-row，结果如下。离子排外的图像很好。

<ion-card>
<img [src]=path alt=""/>

<ion-row>
<img [src]=path alt=""/>
</ion-row>
</ion-card>

在此处输入图像描述

所以 ion-row 在 IOS 中的行为不同。

标签： cssiosimageionic-frameworkionic5

解决方案

我发现问题是由于ion-row和img标签的组合。当我在图像中使用img标签时，ion-row我的图像会被拉伸，有时仅在 IOS 中无法正确对齐。我在不同的 IOS 版本中测试过相同的，并且对所有人都是一样的。我不知道为什么会发生这种情况，但作为一种解决方法，我用 替换了ion-row，div它运行良好。如果其他人面临同样的问题，您可以尝试相同的解决方法。

推荐阅读