InstaFeed.js: измените размер большого пальца с 150x150 на 250x250

Question

Я использую скрипт Instafeed, чтобы получить ленту Instagram и отобразить ее на своей странице.См. GitHub .Вы можете видеть, как он работает в режиме реального времени на моей странице (нижняя сторона)

Это работа, единственная проблема в том, что скрипт получает разрешение большого пальца 150x150, а я хочу 250x250px, потому что я хочусделайте пользовательскую высоту 210px (используя максимальную высоту и ширину автоматически в классе img CSS).

    var userFeed = new Instafeed({
        get: 'user',
        userId: '5388417298',
        accessToken: '5388417298.1677ed0.e3460b92c6f445c98d18f18635f740cf',
          resolution: 'standard_resolution',
  template: '<a href="{{link}}" target="_blank" id="{{id}}"><img src="{{image}}" /></a>',
  sortBy: 'most-recent',
  limit: 6,
  resolution: 'thumbnail',
  orientation: 'square',

    });
    userFeed.run();

CSS

#instafeed a img {
  max-height: 210px;
width: auto;
margin-right: 20px;
}

Answer 1

Варианты разрешения с Instafeed: thumbnail, low_resolution и standard_resolution. Они переводятся в размеры изображения, предоставляемые API Instragram. Это миниатюра размером 150 на 150 пикселей, изображение с максимальным размером 320 пикселей и изображение с максимальным размером 640 пикселей.

Таким образом, чтобы отобразить в разрешении 210px x 210px, я бы выбрал средний (low_resolution). Измените эту строку:

resolution: 'thumbnail',

до

resolution: 'low_resolution',

Однако это не даст обрезанного квадрата, я бы посоветовал вам справиться с этим в вашем CSS. Один из способов - использовать object-fit: cover (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) и убедиться, что img квадратный. Например, вы можете сделать следующее:

#instafeed a img {
   height: 210px;
   width: 210px;
   object-fit: cover;
}

Проверьте поддержку браузера для «подгонки объекта», чтобы убедиться, что он подходит для вашего проекта