gatsby - 盖茨比内容丰富的流体图像拉伸超过 100%

Question

我正在尝试使用图像数组填充 div

fluid{
       ...GatsbyContentfulFluid             
      }

一切正常，除了 gatsby 拉伸小于 div 宽度的图像以填充整个空间（他假设）但我的问题是我是否可以防止这种情况，并且对于这些图像使用 100% 的宽度而不拉伸它们并且只应用流体到更大的图像。

gatsby-image 插件说我可以使用 GatsbyImageSharpFluidLimitPresentationSize 片段

但这不适用于满足

有简单的解决方法吗？谢谢

Answer 1

根据您的要求，您可以进行一些试验来绕过它：

• 正如您所说，Contentful 不允许使用片段，但是，您可以使用插件选项GatsbyImageSharpFluidLimitPresentationSize下载资产，并使用片段应用 a 。我看起来像：downloadLocal: true staticQueryGatsbyImageSharpFluidLimitPresentationSize

    const data = useStaticQuery(graphql`
      query {
        file(relativePath: { eq: "path/to/image/default.jpg" }) {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluidLimitPresentationSize
            }
          }
        }
      }
    `)
  
    return <Img fixed={data.file.childImageSharp.fixed} />
  }
  
  

• 另一种可能需要更多处理（媒体查询和 CSS 工作）的选项是使用Contentful 允许的固定大小片段之一。