How to stop gatsby-plugin-image from enlarging small source images?

[Liingon]

Hello! I'm updating a site to Gatsby 3 and ran into a problem when migrating to gatsby-plugin-image from gatsby-image.

We have some source images that in some cases may be smaller than the set width, how do I stop gatsby-plugin-image from enlarging them?

With gatsby-image we solved it by using the fragment ...GatsbyImageSharpFluidLimitPresentationSize but that doesn't seem to be possible any more.

[LekoArts]

Hi!

Did you change the layout option? The default option (CONSTRAINED) shouldn't enlarge your image but use the source image size as the maximum size: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#layout

[Liingon]

Yeah, it's already set to CONSTRAINED. This is the graphql:

childImageSharp {
  gatsbyImageData(width: 200, quality: 90, layout: CONSTRAINED)
}

Now that I looked at it again, it seems the image itself isn't enlarged but it gets stretched because the container (and placeholder image?) is 200px wide regardless of source image size.

[Liingon]

Setting object-fit: scale-down in imgStyle seems to work for my use case, but obviously wont work in all situations.

<GatsbyImage
  image={image.localFile.childImageSharp.gatsbyImageData}
  alt={image.altText}
  imgStyle={{
    objectFit: 'scale-down',
  }}
/>