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

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

1 个答案: