根据图像高度动态设置可变填充 css angular

Question

我有一些 angular html 代码可以呈现图像列表（其中一些可能是其他图像的重复），如下所示：

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

图片的css：

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

我想根据图片的高度为每张图片设置 padding-bottom。 padding-bottom 应该是 72px - height of image——基本上，padding 应该包含最大高度 72px 的任何剩余像素。

类似于：

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

如何实现？

Answer 1

您可以使用如下模板创建组件：

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

其中 path 表示图像源 link，paddingBottom 定义图像底部填充。图像标有 #image 标识符以访问元素 (ElementRef)。一旦加载图像（在 onLoad() 函数中），您就可以访问图像高度并计算底部填充。特此 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;
    }
  }
}

当然你可以在你的组件容器中多次调用这个组件。

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

Answer 2

您可以将所有逻辑保留在模板中，这样它就可以在 ngFor 中工作：

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

Answer 3

如果您想要的效果是最大图像高度为 72px，您可以尝试将 img 包装在 div 中并在 div 上设置高度吗？这会给你带来你正在寻找的视觉效果吗？它不需要不同的填充，“填充”将是 imgHolder div.

中留下的 space

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

根据图像高度动态设置可变填充 css angular

Dynamically set variable padding based on image-height css angular

html

css

padding

angular