Fitting an image to the content area between the header and footer

Ionic Framework ionic-v3
1

This just to let you know how I managed to fit an image between my header and footer in an Ionic 3 app. After a lot of searching through similar answers, I finally settled on this technique. I used a combination of an object-fit style and the height attribute.

I created a class for my image in app.scss:

.scale-to-fit {
    object-fit: contain;
}

In my HTML, I have:

<ion-row><ion-col text-center>
    <img class="scale-to-fit" [src]="imgURI" [style.height.px]="maxImgHeight" />
</ion-col></ion-row>

In my TS, I have:

import { Content } from 'ionic-angular';
import { ViewChild } from '@angular/core';

export class MyPage {

    maxImgHeight: number;

    @ViewChild(Content) content : Content;

    ionViewDidEnter() {
        // Scale the image to fit in the content area between the header and footer.
        this.maxImgHeight = this.content.contentHeight;
    }

This approach makes sure the image fits in the content area between any header and footer (scaling up or down as needed), and also maintains the image aspect ratio.