如何在React中固定背景图像的大小

Question

我正在使用gatsby -image-background滑块和graphql作为背景图像滑块。但是问题是，我希望背景图像仅占据整个空间的25％。如果我降低高度，图像会被裁剪，这是我不想要的。如果我增加高度（或同时增加高度和宽度），则背景图像将占据整个空间的50％。

这是代码：

   query {

    allFile(filter: {sourceInstanceName: {eq: "background"},
    extension: {regex: "/(jpg)|(png)|(jpeg)/"}}) {
totalCount
edges {
    node {
    base
    childImageSharp {
        fluid(maxWidth: 600){
            ...GatsbyImageSharpFluid_withWebp_tracedSVG
        }
    }
    }
}
 }
}

反过来

 return(
    <div style ={{backgroundSize:"auto 40%"}}>
      <Img
        fluid={images[index].node.childImageSharp.fluid}
        alt={images[index].node.base.split(".")[0]}
    />
    </div>

    )
     }

请帮助。TIA

Answer 1

如果您说的是gatsby-background-image，则表示您的JSX结构错误。您的组件应类似于：

python manage.py collectstatic

您的GraphQL查询看起来不错，因此您只需要将 <BackgroundImage Tag="section" className={className} fluid={imageData} backgroundColor={`#040e18`}> <h2>Your content if needed</h2> </BackgroundImage> 数据传递到fluid组件。

关于背景图像的适合度，您可以使用以前的结构以及我提供的结构，并使用<BackgroundImage>属性进行操作，在background-size和cover之间进行切换应该设法使背景图像适合其包装的大小。