使用Instafeed.js显示非方形Instagram图像的正确方法是什么？

Question

我正在Wordpress网站上集成Instagram提要，但并非所有图像都是正方形的，它们必须在网站上显示为正方形。 现在在我的 js 文件中，我有template: '<div class="col-md-3 col-sm-6 service wow animated zoomIn "><a class="instagram-image" href="{{link}}" target="_blank"><img src="{{image}}"/></a></div>'

然后在我的 CSS 中

.instagram-image img{
width: 300px;
height: 300px;
margin-bottom: 30px;
}

但这"误导"了图片。 我想通过将提要中的图片添加为覆盖合适大小的div 但无法使其工作的背景图像来解决此问题。

即使使用最简单的代码，例如

template: '<div class="instagram-image" style="background-image:url({{image}})">foobar</div>'

和

.instagram-image{
width: 300px;
height: 300px;
background-size: cover;
}

我无法以某种方式让它工作。仅显示 foobars。 我应该如何重写我的第一个代码片段以使其在后台工作？还是有更好的方法？

Answer 1

好的，我有解决方案。没有必要使用图像作为背景，因为你可以使用对象适合：覆盖到css，然后它与

template: '<div class="col-md-3  col-sm-6  service wow animated zoomIn "><a class="instagram-image" href="{{link}}" target="_blank"><img src="{{image}}"/></a></div>'

和

.instagram-image img{
width: 300px;
height: 300px;
margin-bottom: 30px;
object-fit: cover;
}