Gatsby 图像裁剪行为

Question

我正在使用 Gatsby 和

gatsby-plugin-image

来管理从 Netlify CMS 拉入的图像。我正在努力解决带有肖像图像的 Gatsby Image 插件的行为。

特别是，我有一个全高英雄图像（

sizes: "(min-width: 1024px) 1024px, 100vw"

），它有一些奇怪的裁剪行为。这种情况一直在发生，但当原始图像是肖像时尤其明显。

我的标题图片原始尺寸是2268px x 4032px。由于某种原因，盖茨比将其裁剪为横向纵横比（1008 像素 x 568 像素）。通过这样做，我失去了图像的关键部分 - 即使有一些智能裁剪行为，它也不太正确。我不明白我的代码中是什么驱动了裁剪。

这是 Gatsby 中用于拉入图像的代码：

export const query = graphql`
  query ($slug: String) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        author
        date(formatString: "MMMM YYYY")
        excerpt
        feature {
          image {
            childImageSharp {
              gatsbyImageData(
                layout: CONSTRAINED
                placeholder: BLURRED
                formats: [AUTO, WEBP, AVIF]
              )
            }
          }
          caption
          art_v
          art_h
        }
      ...
      }
    }
  }
`;

Answer 1

尝试将高度和宽度添加到查询中：

export const query = graphql`
  query ($slug: String) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        author
        date(formatString: "MMMM YYYY")
        excerpt
        feature {
          image {
            childImageSharp {
              gatsbyImageData(
                height: 4032
                width: 2268
                layout: CONSTRAINED
                placeholder: BLURRED
                formats: [AUTO, WEBP, AVIF]
              )
            }
          }
          caption
          art_v
          art_h
        }
      ...
      }
    }
  }
`;