Dynamically set variable padding based on image-height css angular

user_6509816 0
Viewed 903

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?

angular padding css html
3 Answers

You can create a component with a template like the following:

<img
  [src]="path"
  (load)="onLoad()"
  [style.paddingBottom.px]="paddingBottom"
  #image
/>

where path represents the image source link and paddingBottom defines the image bottom padding. The image is flagged with #image identifier to access to the element (ElementRef). As soon as the image is loaded (in the onLoad() function) you can access to the image height and calculate the bottom padding. Hereby the ImageComponent:

export class ImageComponent implements OnInit {

  @Input() paddingBottom = 72;
  @Input() maxPaddingBottom = 72;
  @Input() path = '';
  @ViewChild('image') image?: ElementRef;

  ...

  onLoad(): void {
    if (this.image) {
      const h = (this.image?.nativeElement as HTMLImageElement).height;
      this.paddingBottom = this.maxPaddingBottom - h;
    }
  }
}

Of course you can call this component multiple times inside your component container.

<ng-container *ngFor="let p of paths">
  <app-image [path]='p'></app-image>
</ng-container>
user_118334100

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

If the effect you want is a max image height of 72px, could you try wrapping the img in a div and setting the height on that div? Will that give you the visual effect you are looking for? It won't need varying padding, the "padding" will be the space left inside the imgHolder div.

.imgHolder {
  height: 72px;
}

.image {
   max-height: 100%;
   max-width: 100%;
}


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