Tengo un código html angular que muestra una lista de imágenes (algunas de las cuales pueden ser repeticiones de otras imágenes) así:
<div *ngFor="let content of contentList> <img class="image" src="{{ content.image }}"/> </div>El css para la imagen:
.image { height: 100%; max-height: 72px; } Me gustaría establecer el relleno inferior para cada imagen en función de la altura de la imagen. El relleno inferior debe ser 72px - height of image ; básicamente, el relleno debe abarcar los píxeles sobrantes de la altura máxima de 72 px.
Algo como:
.image { height: 100%; max-height: 72px; padding-bottom: (72 - the image's height)px; }¿Cómo se puede lograr esto?
Puede crear un componente con una plantilla como la siguiente:
<img [src]="path" (load)="onLoad()" [style.paddingBottom.px]="paddingBottom" #image /> donde path representa el enlace de origen de la imagen y paddingBottom define el relleno inferior de la imagen. La imagen se marca con el identificador #image para acceder al elemento ( ElementRef ). Tan pronto como se carga la imagen (en la función onLoad() ) puede acceder a la altura de la imagen y calcular el relleno inferior. Por la presente el 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; } } }Por supuesto, puede llamar a este componente varias veces dentro de su contenedor de componentes.
<ng-container *ngFor="let p of paths"> <app-image [path]='p'></app-image> </ng-container>Puede mantener toda la lógica en la plantilla para que funcione en un ngFor:
<div *ngFor="let content of contentList"> <img class="image" (load)="image.style.paddingBottom = 72 - image.height + 'px'" [src]="content.image" #image /> </div>Si el efecto que desea es una altura máxima de imagen de 72 px, ¿podría intentar envolver el img en un div y establecer la altura en ese div? ¿Eso le dará el efecto visual que está buscando? No necesitará un relleno variable, el "relleno" será el espacio que queda dentro del div imgHolder.
.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>