将“宽屏”图像放入方形 div答案

【问题标题】：Fitting a 'widescreen' image into a square div将“宽屏”图像放入方形 div
【发布时间】：2019-10-05 04:48:31
【问题描述】：

我正在向 Angular webapp 添加一个 instagram 部分。问题是 Instagram 上的视频缩略图是宽屏（矩形），而照片缩略图是方形的。有些不是很好的正方形网格，而是矩形，破坏了设计。

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

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

我已经尝试将方形 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的解决方案，但无济于事

【问题讨论】：

我们只处理宽度还是高度？因为您的宽幅图片也可以像水平/垂直一样高。我的意思是基本上有两种情况图片不适合：太宽或太高。你有两张照片还是只有宽幅照片？

标签： html css angular twitter-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

object-fit 属性定义元素如何响应其内容框的高度和宽度。它适用于与 object-position 属性结合使用的图像、视频和其他可嵌入媒体格式。单独使用 object-fit 时，我们可以通过细粒度控制它在盒子内的挤压和拉伸方式来裁剪内嵌图像。

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

【讨论】：