Render Image Responsively in Angular 8

I am trying to make a simple custom Gallery Component. Let me give you brief working pattern of that-

• The main component will have image thumbnails of all the images arranged in the flex layout.
• As soon as any thumbnail is clicked, an Overlay is rendered on the screen displaying the main photo associated with that thumbnail. The basic gallery navigating elements are also present in that, such as going to previous images, going to next image and closing the overlay.

Now, as we know that the size of the images can vary significantly, it is very important that the image in the overlay fits responsively in the container while maintaining its aspect ratio.

I have written the overlay logic in Angular for this purpose in the following way -

Gallery-Modal.Component.html

<i class="fa fa-times-circle cross" (click)="closeGallery()"></i>
<a class="control control-prev">
  <i class="fa fa-arrow-circle-left indicators"></i>
</a>
<a class="control control-next">
  <i class="fa fa-arrow-circle-right indicators"></i>
</a>
<div class="d-flex justify-content-center align-items-center" style="height: 100vh; width: 100vw">
  <div class="gallery-item d-flex justify-content-center align-items-center" #galleryItemDiv>
    <img [src]="imageSrc" alt="" (load)="rectifySizes()" #imgDiv>
  </div>
</div>

Gallery-Modal.Component.ts

@Component({
  selector: 'app-gallery-modal',
  templateUrl: './gallery-modal.component.html',
  styleUrls: ['./gallery-modal.component.css']
})
export class GalleryModalComponent implements OnInit {

  imageSrc: string;
  containerSizeRatio: number;
  imgSizeRatio: number;


  @Input()
  imageNum : number;

  @Output()
  modalClose = new EventEmitter<boolean>();

  @ViewChild('galleryItemDiv', {static: true})
  galleryItemDiv: ElementRef;

  @ViewChild('imgDiv', {static: true})
  imageDiv: ElementRef;

  constructor(
    private galleryService: GalleryService,
    private renderer: Renderer2
  ) { }

  ngOnInit() {
    this.imageSrc = this.galleryService.getGalleryData(this.imageNum).imageSource;
  }

  closeGallery():void {
    this.modalClose.emit(true);
  }

  rectifySizes():void {
    // key : the CSS attribute, such as width or height ; value : value to set the key, such as 100%
    let key:string = this.getTheImageFitProperty(this.imageDiv, this.galleryItemDiv).key;
    let value:string = this.getTheImageFitProperty(this.imageDiv, this.galleryItemDiv).value;

    this.renderer.setStyle(this.imageDiv.nativeElement, key, value);

  }


  getTheImageFitProperty(imgDiv: ElementRef, galleryDiv: ElementRef): any {
    // Logic to fit the image in the galleryDiv Container

  }

}

So, rectifySizes() event, which is the starting point toward resizing the image, in #imgDiv is fired after the image is loaded in the element.

The problem what I am facing in this logic is that

The width or height of the image is set after the image, with the actual size, is displayed first. This does not make the view smooth.

What I am looking for is the way to detect the actual size of the image before it is loaded in the element.

Is there any better way to accomplish this objective?