Блог

Главная - Вопросы по программированию - Динамически устанавливаемое переменное заполнение на основе css-угла высоты изображения

Динамически устанавливаемое переменное заполнение на основе css-угла высоты изображения

#html #css #angular #padding

Вопрос:

У меня есть некоторый угловой html-код, который отображает список изображений (некоторые из которых могут быть повторениями других изображений) примерно так:

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

css для изображения:

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

Я хотел бы установить отступ внизу для каждого изображения в зависимости от высоты изображения. Заполнение снизу должно быть 72px - height of image -в основном, заполнение должно охватывать любые оставшиеся пиксели максимальной высоты 72 пикселей.

Что-то вроде:

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

Комментарии:

1. Это может сработать, если у меня есть только одно изображение, но, похоже, не работает в случае рендеринга нескольких изображений в цикле

2. Быстрое решение: Переместите описанное выше в пользовательский компонент (со свойством path) и вызовите компонент в своем цикле

Ответ №3:

Если эффект, который вы хотите, составляет максимальную высоту изображения 72 пикселей, не могли бы вы попробовать обернуть img в div и установить высоту на этом div? Даст ли это вам тот визуальный эффект, который вы ищете? Для этого не потребуется варьировать заполнение, «заполнением» будет пространство, оставшееся внутри 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>
Метки: