Gatsby-изображение отображается больше, чем заданное свойство maxWidth

Question

У меня есть страница Гэтсби, которая имеет 2 столбца одинаковой ширины, верхний колонтитул и нижний колонтитул внизу. У меня есть контент в левом столбце и изображение в правом столбце. Я использую 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
                }
            }
        }
    }
`

Answer 1

Проверьте документы для Избегайте растянутых изображений с использованием типа жидкости

изображения с использованием типа жидкости растягиваются, чтобы соответствовать ширине контейнера. В случае, когда ширина изображения меньше доступного окна просмотра, изображение будет растягиваться, чтобы соответствовать контейнеру, что может привести к нежелательным проблемам и ухудшению качества изображения.

Чтобы противостоять этому граничному случаю, можно обернуть компонент 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
    }
  }
}