javascript - InstaFeed.js : Change thumb size from 150x150 to 250x250

Question

我使用 Instafeed 脚本获取 instagram 提要并将其显示在我的页面上。参见 GitHub .您可以在 my page 上看到它正在运行(底部)

它的工作，唯一的问题是脚本获得 150x150 拇指分辨率，我想要 250x250px，因为我想将自定义高度设置为 210px(在 CSS img 类上使用 max-height 和 width auto)。

    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。这些转换为 Instragram API 提供的图像大小。这些是 150 像素 x 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;
}

检查浏览器对“object-fit”的支持以确保它适合您的元素