htmlcssinstafeedjs

What's the right way to display not-square Instagram images using Instafeed.js?

I'm integrating an Instagram feed on a Wordpress website, but not all images are square and they have to be displayed as squares on the site. Right now in my js file I have 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>'

and then in my css

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

But that 'misforms' the pictures. I would like to solve this issue by adding the pictures from the feed as backgroundimages that cover a div of the right size, but can't get it working.

Even with the most simple code like 

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

and

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

I can't get it working somehow. Only the foobars are displayed. How should I rewrite my first code snippet to get this working with the background? Or is there a better way?

Solution

  • Ok, I have the solution. There's no need to use the image as a background, as you can just use object-fit: cover to the css and then it works with 

    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>'

    and 

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