在gatsby-image props中使用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%",
  }}
/>