Gatsby 盖茨比图像：设置图像处理管道

我正在Gatsby.js网站上工作，希望使用Gatsby image和Gatsby插件sharp设置图像预处理。 问题是我使用的图像具有不同的纵横比和不同的尺寸。我试图实现的是自动生成的方形流体缩略图。到目前为止，我成功地在GraphQL查询中使用了

fluid

，但不幸的是，它裁剪了图像。我还尝试了

fit

parameter form doc，但它似乎是在不久前被删除的：

image {
  relativePath
  childImageSharp {
    fluid(maxWidth: 320, maxHeight: 320, cropFocus: CENTER) {
      ...GatsbyImageSharpFluid
    }
  }
}

结果是： 预期结果：

源图像为方形-2480x2480px

所以，我想知道是否有一种方法可以设置图像处理的多个步骤——首先将尺寸调整到所需尺寸的2倍或3倍，然后使其流动

我的依赖项来自

package.json

，以防万一：

"gatsby": "^2.2.8",
"gatsby-image": "^2.0.41",
"gatsby-paginate": "^1.0.17",
"gatsby-plugin-google-tagmanager": "^2.0.10",
"gatsby-plugin-layout": "^1.0.13",
"gatsby-plugin-less": "^2.0.12",
"gatsby-plugin-manifest": "^2.0.24",
"gatsby-plugin-netlify-cms": "^3.0.16",
"gatsby-plugin-netlify-cms-paths": "^1.2.1",
"gatsby-plugin-offline": "^2.0.25",
"gatsby-plugin-react-helmet": "^3.0.10",
"gatsby-plugin-sharp": "^2.0.32",
"gatsby-remark-images": "^3.0.10",
"gatsby-remark-relative-images": "^0.2.2",
"gatsby-source-filesystem": "^2.0.28",
"gatsby-transformer-remark": "^2.3.8",

---

我能够解决我的问题：

fit

是在

gatsby插件中添加的-sharp@2.0.34

我正在使用

2.0.32

。因此，

npm更新

帮助了它

我错了，我的源图像是正方形的。它是垂直的，这就是结果图像被裁剪的原因

---

这样就不需要对我的缩略图进行多步骤处理。

错误的图像。请阅读标签说明。