How to set height on <ion-img>

Question

I have an ionic page with an ion-img inside:

<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>

When a picture is set to selectedImage it occupies the whole screen and more. I have to scrrol to see the full image.

I want the image to occupy 20% of the screen or a fix height.

I tried to do this in css:

ion-grid {
  height: 100%;

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

And also I tried to do with height property:

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

And the image continues occupying the same space

How should I do this? Thanks for help.

Answer 1

if u Reduce image height write inline style< img src="" style="width:50%" >use this attribute image size(height) will reduce automatically

No option to maximize image size

Answer 2

I know that the accepted answer does the requested results, but using the ionic ion-img tag have advantages like lazy loading and listening to the loading events (ionError, ionImgDidLoad, ionImgWillLoad).

I don't prefer to lose all that tag advantages in favor of styling. The better way to do this is using the CSS shadow parts.

ion-img has a shadow part image so the requested result via SCSS will look like:

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