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

我正在Wordpress网站上集成Instagram提要，但并不是所有图像都是正方形的，它们必须在网站上显示为正方形。 现在在我的js文件中有

模板：'

然后在我的css中

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

但这与图片“不符”。 我想通过添加feed中的图片作为背景图片来解决这个问题，这些图片覆盖了一个大小合适的div，但无法使其工作

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

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

不知怎的，我无法让它工作。仅显示foobar。

---

我应该如何重写我的第一个代码段以使其在后台工作？还是有更好的办法？

好的，我有解决办法。没有必要将图像用作背景，因为您可以只使用objectfit:cover到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>'

---

好的，我有解决办法。没有必要将图像用作背景，因为您可以只使用objectfit:cover到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;
}