Как правильно отображать не квадратные изображения Instagram с помощью Instafeed.js? - PullRequest
Новая
       21

Как правильно отображать не квадратные изображения Instagram с помощью Instafeed.js?

0 голосов
/ 19 октября 2018

Я интегрирую ленту Instagram на веб-сайт Wordpress, но не все изображения имеют квадратную форму, и они должны отображаться в виде квадратов на сайте.Прямо сейчас в моем файле 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;
}

Но это «искажает» фотографии.Я хотел бы решить эту проблему, добавив изображения из ленты в качестве фоновых изображений, которые покрывают div нужного размера, но не могут заставить его работать.

Даже с самым простым кодом, таким как 

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

и 

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

Я не могу заставить его работать каким-то образом.Только foobars отображаются.Как мне переписать мой первый фрагмент кода, чтобы это работало с фоном?Или есть лучший способ?

1 Ответ

0 голосов
/ 21 октября 2018

Хорошо, у меня есть решение.Нет необходимости использовать изображение в качестве фона, так как вы можете просто использовать подгонку объекта: обложка для 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;
}
...