基于图像高度 css 角度动态设置可变填充

Posted 2023-03-06

【中文标题】基于图像高度 css 角度动态设置可变填充

【英文标题】：Dynamically set variable padding based on image-height css angular

【发布时间】：2021-11-10 22:04:54

【问题描述】：

我有一些有角度的 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;

如何做到这一点？

【参考方案1】：

您可以将所有逻辑保留在模板中，以便在 ngFor 中工作：

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

【参考方案2】：

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

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

其中path 代表图像源链接，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>

【讨论】：

如果我只有一张图像，这可能会起作用，但在循环渲染多张图像的情况下似乎不起作用

快速解决方案：将上述内容移动到自定义组件中（带有路径属性）并在循环中调用该组件

【参考方案3】：

如果您想要的效果是最大图像高度为 72px，您可以尝试将 img 包装在一个 div 中并在该 div 上设置高度吗？这会给你想要的视觉效果吗？它不需要不同的填充，“填充”将是 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>