Question

我正在将instagram部分添加到Angular Webapp中。问题是Instagram上的视频缩略图是宽屏的（矩形），照片缩略图是方形的。有些不是矩形，而是矩形，破坏了设计。

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

我正在使用引导程序来组织/显示缩略图网格。

我已经尝试将Square 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。

object-fit属性定义元素如何响应其内容框的高度和宽度。它与对象位置属性一起用于图像，视频和其他可嵌入的媒体格式。本身适合使用的对象拟合功能，使我们能够对其在框内的挤压和伸展方式进行精细控制，从而裁剪出内嵌图像。

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

Answer 2

我能够通过制作三个div来解决此问题。背景div，容器div和实际图像div。使用表，我能够达到预期的结果。谢谢大家！

使“宽屏”图像适合正方形div

2 个答案: