使用 Instafeed.js 显示非正方形 Instagram 图片的正确方法是什么?
What's the right way to display not-square Instagram images using Instafeed.js?
我正在 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;
}
但是那个'misforms'的图片。
我想通过将 Feed 中的图片添加为背景图片来解决此问题,这些图片覆盖 div 大小合适的图片,但无法正常工作。
即使使用像
这样最简单的代码
template: '<div class="instagram-image" style="background-image:url({{image}})">foobar</div>'
和
.instagram-image{
width: 300px;
height: 300px;
background-size: cover;
}
我无法让它以某种方式工作。仅显示 foobars。
我应该如何重写我的第一个代码片段以使其在后台运行?或者有更好的方法吗?
好的,我有办法了。无需使用图像作为背景,因为您可以使用 object-fit: 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;
}
我正在 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;
}
但是那个'misforms'的图片。 我想通过将 Feed 中的图片添加为背景图片来解决此问题,这些图片覆盖 div 大小合适的图片,但无法正常工作。
即使使用像
这样最简单的代码template: '<div class="instagram-image" style="background-image:url({{image}})">foobar</div>'
和
.instagram-image{
width: 300px;
height: 300px;
background-size: cover;
}
我无法让它以某种方式工作。仅显示 foobars。 我应该如何重写我的第一个代码片段以使其在后台运行?或者有更好的方法吗?
好的,我有办法了。无需使用图像作为背景,因为您可以使用 object-fit: 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;
}