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 .