Question

我有一个gatsby页面，该页面有2列等宽的宽度，顶部是页眉，底部是页脚。我在左列中有一些内容，在右列中有图像。我正在使用graphql查询流体图像。我设置了maxWidth属性，但是当页面加载时，图像仍然是原始大小，大约为700 x800。引起这种情况的任何帮助将不胜感激，因为我还是gatsby的新手。谢谢。

    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
                }
            }
        }
    }
`

Answer 1

检查文档中的Avoiding stretched images using the fluid type

使用液体类型的
图像会拉伸以匹配容器的宽度。如果图像的宽度小于可用的视口，则图像将拉伸以匹配容器，从而可能导致意外问题并降低图像质量。

要应对这种情况，可以包装Img组件以设置更好的值，对于这种情况，可以设置maxWidth：

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} />
}

注意：GatsbyImageSharpFluid片段不包括presentationWidth。您需要将其添加到您的graphql查询中，如以下代码片段所示：

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

Gatsby图片显示的内容大于设置的maxWidth属性

1 个答案: