Gatsby.js - адаптивные изображения, используя gatsby-image и gatsby-transformer-sharp

Question

Я прочитал, что я мог о том, как создавать адаптивные изображения с разными размерами в gatsby.js

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

Это мой запрос:

export const pageQuery = graphql`
  query {
    allImageSharp {
      edges {
        node {
          ... on ImageSharp {
            fluid {
              src
            }
          }
        }
      }
    }
    fluidImages: file(relativePath: { regex: "/web-development/" }) {
      childImageSharp {
        fluid(duotone: { highlight: "#f00e2e", shadow: "#192550" }) {
          base64
          aspectRatio
          src
          srcSet
          srcWebp
          sizes
        }
      }
    }
  }
`

Это мой код для отображения изображения:

const { data } = this.props
const webdev = data.fluidImages.childImageSharp.fluid
<picture>
    <source srcSet={webdev.srcSet} sizes={webdev.sizes}/>
    <img alt="Web Development" src={webdev.src} />
</picture>

И снова размер мобильного телефона велик, но на рабочем столе отображается полноразмерное изображение, которое ломает все.

С уважением