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

score 0 · Answer 1 · answered Sep 13 '20 at 15:56

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.

Gatsby contentful fluid image stretched over 100%

1 Answers1