在 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 版本时才使用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%",
  }}
/>