Gatsby内容丰富的流体图像拉伸超过100％

问题描述

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

fluid{
       ...GatsbyContentfulFluid             
      }

一切正常，除了盖茨比拉伸小于div宽度的图像以填充整个空间（他认为是）外，我的问题是我是否可以防止这种情况，并且对于那些图像，使用其宽度的100％而不拉伸它们，仅将流体应用于较大的图像。

gatsby-image plugin says that I can use GatsbyImageSharpFluidLimitPresentationSize fragment

但这不适用于满足条件的

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

解决方法

根据您的要求，您有一些试验可以绕开它：

• 正如您所说，“有内容”不允许GatsbyImageSharpFluidLimitPresentationSize片段，但是，您可以使用downloadLocal: true plugin option下载资产，然后应用staticQuery与GatsbyImageSharpFluidLimitPresentationSize片段。我会看起来像：

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

• 另一个可能需要更多处理（媒体查询和CSS努力）的选项是使用allowed by Contentful的固定大小的片段之一。