如何設置高度<ion-img>

Question

我有一個帶有離子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時，它占據整個屏幕等等。 我必須scrrol才能看到完整的圖像。

我希望圖像占據屏幕的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

如果你減少圖像高度寫入內聯樣式<img src =“”style =“width：50％”>使用此屬性圖像大小（高度）將自動減少

沒有選項可以最大化圖像大小