Question

我正在使用Instafeed脚本获取instagram feed，并将其显示在我的页面上。参见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像素的缩略图，一个最大尺寸为320px的图像和一个最大尺寸为640px的图像。

因此要以210像素x 210像素显示，我会选择中间一个（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'的支持，以确保它适合您的项目

InstaFeed.js：将拇指大小从150x150更改为250x250

1 个答案: