html - 将 'widescreen' 图像放入正方形 div

Question

我正在将一个 instagram 部分添加到 Angular 网络应用程序中。问题是 Instagram 上的视频缩略图是宽屏(矩形)，而照片缩略图是方形的。不是得到一个漂亮的正方形网格，而是一些矩形，破坏了设计。

有没有办法自动在这些宽屏图像的顶部和底部添加黑条，使它们成为正方形？所有拇指都应该大小相同。该解决方案确实需要动态/响应，所以我不能使用固定的宽度和高度，然后手动拉伸(stretch)拇指。

我正在使用 Bootstrap 来组织/显示缩略图网格。

我已经尝试将方形 div 的背景图像设置为缩略图，但无济于事。我还尝试设置照片 div 的背景颜色，以期实现黑条效果。如果可能的话，我想保持纵横比，因此黑条

Notice how the one thumb is a rectangle, and not square

<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;
}

我试过解决方案 here没用

Answer 1

我认为您搜索 object-fit 或以其他方式将图像设置为 background。

The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and other embeddable media formats in conjunction with the object-position property. Used by itself, object-fit lets us crop an inline image by giving us fine-grained control over how it squishes and stretches inside its box.

https://css-tricks.com/almanac/properties/o/object-fit/