Gatsby contentful fluid image stretched over 100%

Question

I'm trying to fill a div with array of images using

fluid{
       ...GatsbyContentfulFluid             
      }

everything works fine except that gatsby stretches images smaller than a div width to fill out whole space (which he suppose to) but my question is if I can prevent this and for those images use 100% of their width without stretching them and only apply fluid to bigger images.

gatsby-image plugin says that I can use GatsbyImageSharpFluidLimitPresentationSize fragment

but this does not work with contentful

Is there an easy fix? Thanks

Answer 1

You have a few trials to bypass it based on your requirements:

• As you said, Contentful doesn't allow GatsbyImageSharpFluidLimitPresentationSize fragment, however, you can download the asset with the downloadLocal: true plugin option, and apply a staticQuery with the GatsbyImageSharpFluidLimitPresentationSize fragment. I would look something like:

    const data = useStaticQuery(graphql`
      query {
        file(relativePath: { eq: "path/to/image/default.jpg" }) {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluidLimitPresentationSize
            }
          }
        }
      }
    `)
  
    return <Img fixed={data.file.childImageSharp.fixed} />
  }
  
  

• Another option, which may require more treatment (mediaqueries and CSS effort) is to use one of the fixed-size fragments that are allowed by Contentful.