如何在 <ion-img> 上设置高度

Question

我有一个离子页面，里面有 ion-img:

<ion-content>
  <ion-grid>
    <ion-row class="ion-padding" align-items-center justify-content-center>
      <ion-item>
        <ion-label text-wrap class="ion-text-center">
          Servicio de reportes
        </ion-label>
      </ion-item>
    </ion-row>
    <ion-row align-items-center justify-content-center >
      <ion-button size="smaill" type="submit" expand="block" routerDirection="forward" (click)="selectSource()" >Capturar imagen</ion-button>
    </ion-row>
    <ion-row>
      <ion-col>

        <ion-img [src]="selectedImage" *ngIf="selectedImage"> </ion-img>

      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

当图片设置为 selectedImage 时，它会占据整个屏幕甚至更多。我必须滚动才能看到完整的图像。

我希望图像占据屏幕的 20% 或固定高度。

我在 css 中尝试这样做：

ion-grid {
  height: 100%;

  ion-row {
    max-height: 33.33%;
  }
}

我也尝试过身高属性:

 <ion-img height: 10rem; [src]="selectedImage" *ngIf="selectedImage"> </ion-img>

并且图像继续占据相同的空间space

我应该怎么做？感谢您的帮助。

Answer 1

如果你降低图像高度写入内联样式< img src="" style="width:50%" >使用此属性图像尺寸（高度）将自动减小

没有最大化图像大小的选项

Answer 2

我知道接受的答案会得到请求的结果，但是使用 ionic ion-img 标签有 lazy loading[=25= 等优点] 并监听加载事件 (ionError, ionImgDidLoad, ionImgWillLoad).

我不想为了样式而失去所有标签优势。更好的方法是使用 CSS shadow parts.

ion-img has a shadow part image 因此通过 SCSS 请求的结果将如下所示：

ion-img::part(image) { width: 50%; /* or whatever value */ /* you can set the height value too */ }

如何在 <ion-img> 上设置高度

How to set height on <ion-img>

html

css

image

ionic-framework

ionic4