Подгонка широкоэкранного изображения к квадратному элементу

Question

Я добавляю секцию Instagram в веб-приложение Angular. Проблема в том, что миниатюры видео в Instagram широкоформатные (прямоугольные), а миниатюры фотографий квадратные. Вместо того, чтобы получать красивую сетку квадратов, некоторые являются прямоугольниками, разрушающими дизайн.

Есть ли в любом случае автоматическое добавление черных полос вверху и внизу этих широкоэкранных изображений, чтобы сделать их квадратами? Все большие пальцы должны быть одинакового размера. Решение должно быть динамичным / адаптивным, поэтому я не могу использовать фиксированную ширину и высоту, а затем вручную растягивать большие пальцы.

Я использую загрузчик для организации / отображения сетки миниатюр.

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

Обратите внимание, что один большой палец - это прямоугольник, а не квадрат

<div class="row">
   <div class="col-4 ig-posts" *ngFor="let igPost of igPosts" (click)="gotoigPost(igPost)">
   <img [src]="igPost.imageUrl" class="img-fluid" id="ig-post" />
   </div>
</div>

.ig-posts{
    margin: auto;
    vertical-align: middle;
    text-align: center;
    padding-top: 2.5%;
    padding-bottom: 2.5%;  
}

#ig-post{
    border-radius: 20px;
}

Я пробовал решение здесь безрезультатно

Answer 1

Я думаю, вы ищете object-fit или иным образом устанавливаете изображение как background.

Свойство object-fit определяет, как элемент реагирует на высоту и ширину его поля содержимого.Он предназначен для изображений, видео и других встраиваемых форматов мультимедиа в сочетании со свойством object-position.Самообъективное использование объекта позволяет нам обрезать встроенное изображение, предоставляя нам детальный контроль над тем, как оно сжимается и растягивается внутри коробки.

https://css -tricks.com /альманах / свойство / о / объект посадка /

Answer 2

Мне удалось решить проблему, сделав три деления.Фон div, контейнер div и фактический div изображения.Используя таблицы, я смог достичь желаемого результата.Спасибо всем!