Gatsby 盖茨比图像显示的值大于设置的maxWidth属性

我有一个盖茨比页面，它有两列等宽，顶部有一个页眉，底部有一个页脚。我在左栏有一些内容，右栏有一个图像。我正在使用graphql查询流体图像。我设置了maxWidth属性，但是当页面加载时，图像仍然是原始大小，大约为700 x 800。我对盖茨比还不熟悉，因此我非常感谢任何对造成这种情况的原因的帮助。多谢各位

const About = (props) => {
  return (
    <Layout>
      <Row className={aboutStyles.padding}>
        <Col>
          <h1 className="text-center">Test Page</h1>
          <div>
            <p>This is the left column</p>
          </div>
        </Col>
        <Col>
          <Img fluid={props.data.dumpTruck.childImageSharp.fluid} />
        </Col>
      </Row>
    </Layout>
  )
}

export default About

export const pageQuery = graphql`
  query {
    dumpTruck: file(relativePath: { eq: "dumpTruck.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 400) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

const About=（道具）=>{
返回(
测试页
这是左列

)
}
导出默认值关于
export const pageQuery=graphql`
质疑{
dumpTruck:文件（relativePath:{eq:“dumpTruck.jpg”}）{
childImageSharp{
流体（最大宽度：400）{
…盖茨比磁流体
}
}
}
}
`

检查文档中的

使用流体类型的图像将拉伸以匹配容器的宽度。在图像宽度小于可用视口的情况下，图像将拉伸以匹配容器，这可能会导致不必要的问题和恶化的图像质量

为了应对这种边缘情况，可以包裹Img组件，以便为这种情况设置更好的maxWidth：

---

在这个问题上你需要更多的帮助吗？我已经从盖茨比/GraphQL转到这里，因为我无法解决这个问题。

const NonStretchedImage = props => {
  let normalizedProps = props
  if (props.fluid && props.fluid.presentationWidth) {
    normalizedProps = {
      ...props,
      style: {
        ...(props.style || {}),
        maxWidth: props.fluid.presentationWidth,
        margin: "0 auto", // Used to center the image
      },
    }
  }

  return <Img {...normalizedProps} />
}

{
  childImageSharp {
    fluid(maxWidth: 500, quality: 100) {
      ...GatsbyImageSharpFluid
      presentationWidth
    }
  }
}