Как заставить изображение соответствовать своему контейнеру - сделать это динамически - PullRequest
Новая
       48

Как заставить изображение соответствовать своему контейнеру - сделать это динамически

0 голосов
/ 22 апреля 2020

Нужна помощь от эксперта по HTML + CSS: у меня есть angular mat-grid-list дизайна материала, который должен содержать в каждом из его mat-grid-tile 3 элемента - mat-radio-button с левой стороны, а справа текст в заголовке, а внизу - изображение. Основная проблема заключается в том, что изображения, представленные в кодировке Base64, и их размеры (ширина и высота) отличаются друг от друга. Я хотел бы, чтобы каждое изображение полностью помещалось в его контейнер, сохраняя правильные пропорции между его шириной и высотой. Я могу сделать некоторые манипуляции со свойствами изображения css, используя событие загрузки изображения. Вопрос в том, каким должен быть механизм для этого, или есть другая идея \ решение? Вот один из акцентов моей идеи после просмотра одного ответа: я хотел бы подогнать полное изображение к контейнеру, уменьшив при необходимости его размер - я подумал о том, чтобы проверить, что может быть основным ограничением - ширина или высота - при изменении ( ширина \ высота), чтобы он соответствовал контейнеру, и измените другое измерение (высота \ ширина соответственно) с тем же соотношением. Я не против иметь неиспользуемое пространство в контейнере - я знаю, что это один из побочных эффектов .

См. Мой код: (ProfileImage - это кодировка base64)

Html: 

<div>
  <div class="container-fluid">
    <mat-grid-list [cols]="numberOfColumns" rowHeight="2:1">
      <mat-grid-tile *ngFor= "let item of items"> 
        <mat-radio-button value="item.ID">
        <div style="width: 100%; height: 90%;">
            <div style="height: 10%;">{{item.Name}}</div>
            <div style="height: 90%;" >
              <img [src]="item.ProfileImage" class="thumbnail" (load)="itemProfileHasLoaded($event, item.ID)">
            </div>
        </div>
        </mat-radio-button>
      </mat-grid-tile>
    </mat-grid-list>
  </div>
</div>

компонент: 

  itemProfileHasLoaded(event : any, itemID : number)
  {
    if (event && event.target)
    {
      //I can set here some logic to set their dimensions, but what should it be ? 
      event.target.width = 
      event.target.height = 
    }*/
  }

1 Ответ

0 голосов
/ 22 апреля 2020

хорошо, вот в чем загвоздка:

"Я бы хотел, чтобы каждое изображение полностью помещалось в его контейнер, сохраняя правильные пропорции между его шириной и высотой."

Если вы когда-либо Попытавшись поместить квадратный блок в круглое отверстие, вы знаете, что произойдет.

Вы НЕ МОЖЕТЕ поместить разных крыс ios в один контейнер без искажений. Поэтому либо приведите изображение в соответствие с контейнером и потеряйте соотношение, либо поместите его в фоновый режим и потеряйте части изображения.

Мой совет: используйте фоновое изображение с background-size: cover;

...