Dynamically set variable padding based on image-height css angular

Issue

I have some angular html code that renders a list of images (some of which may be repeats of other images) like so:

<div *ngFor="let content of contentList>
  <img class="image" src="{{ content.image }}"/>
</div>

The css for image:

.image {
  height: 100%;
  max-height: 72px;
}

I'd like to set the padding-bottom for each image based on the height of the image. The padding-bottom should be 72px - height of image--basically, the padding should encompass any leftover pixels of the max-height of 72px.

Something like:

.image {
  height: 100%;
  max-height: 72px;
  padding-bottom: (72 - the image's height)px;
}

How can this be accomplished?

Solution

You could keep all the logic in the template so it will work in an ngFor:

<div *ngFor="let content of contentList">
  <img
    class="image"
    (load)="image.style.paddingBottom = 72 - image.height + 'px'"
    [src]="content.image"
    #image
  />
</div>

Answered By - JayChase