在gatsby-image道具中使用objectFit

Question

我正在尝试在gatsby-image：objectFit="none"上使用此属性 其无效-改为显示默认"cover"。

我可以使用CSS修复此问题，但希望不需要任何想法。

这是图片的代码：

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

Answer 1

请注意，只有在使用IE polyfill version时才使用objectFit和objectPosition道具：

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

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

如果没有，则应通过imgStyle以常规方式传递它们：

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

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