如何在<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 时，它会占据整个屏幕，甚至更多。我必须sc缩才能看到完整图像。

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

我尝试在CSS中执行此操作：

ion-grid {
  height: 100%;

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

我也尝试使用height属性：

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

图像继续占据相同的空间

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

Answer 1

如果您减小图像高度，请编写内联样式使用此属性，图像尺寸（高度）将自动减小

没有选择最大化图像尺寸