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

但這“歪曲了”圖片。 我想通過將Feed中的圖片添加為可覆蓋正確尺寸div的backgroundimages來解決此問題，但無法使其正常工作。

即使使用最簡單的代碼，例如

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

和

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

我無法以某種方式使其工作。 僅顯示foobar。 我應該如何重寫我的第一個代碼段以使其在后台運行？ 或者，還有更好的方法？

Answer 1

好的，我有解決方案。 無需將圖像用作背景，因為您可以使用object-fit：覆蓋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;
}