using objectFit in gatsby-image props

Question

I'm trying to use this property on gatsby-image: objectFit="none" its having no effect - the default of "cover" appears instead.

I can fix this with css, but hoping there's no need to do this, any ideas.

Here's the code for the image:

    <Img
        fluid={product.variants[imageLoc].image.localFile.childImageSharp.fluid}
        objectFit="none"
    />

Answer 1

Note that the objectFit & objectPosition props are only used if you are using the IE polyfill version:

import Img from "gatsby-image/withIEPolyfill" //<-- IE polyfill

<Img
  fixed={...}
  objectFit="cover"
  objectPosition="50% 50%"
/>

If not, you should pass them in as regular styles via imgStyle:

import Img from "gatsby-image" //<-- regular

<Img
  fixed={...}
  imgStyle={{
    objectFit: "none",
    objectPosition: "50% 50%",
  }}
/>