gatsby-background-image 在浏览器调整大小时裁剪背景图像的左侧

Question

我可以使用下面的代码在 div 上使用常规 css 创建我想要的结果。图像贴在屏幕的右侧，图像的左侧被裁剪，这样当您缩小屏幕尺寸时，您仍然可以在图像中看到城堡。

#bgImg{
  background-image: url("https://i.stack.imgur.com/pfepb.jpg");
  height: 225px;
  width: 100%;
  background-position: right center;
  object-fit: fill;
}

<div id='bgImg'><div>

我无法使用 gatsby-background-image 创建相同的结果。图像始终裁剪图像的右侧。

我尝试创建 code sandbox，但不幸的是图像没有出现，我也找不到原因

这是我的代码，它裁剪图像的右侧而不是左侧

const bgImgProps: FluidObject = data.bessImg.childImageSharp.fluid
const otherImgProps: FluidObject = data.logoImg.childImageSharp.fluid

<BackgroundImage
        Tag="section"
        role="img"
        className='w-100 h-100'
        style={{
          backgroundPosition: "right center",
          objectFit: "fill"
        }}
        fluid={bessImgProps}
        backgroundColor={`#040e18`}
      >
         <div className='header-outer-container d-flex justify-content-center'> 
            <a className='only-gt-md' style={{height: "130px", width: "350px"}} href="/">
              <Img 
                className='w-100 h-100'
                fluid={logoImgProps}
                fadeIn={false}
                loading="eager"
                imgStyle={{objectFit: 'contain' }}
              ></Img>
            </a>
        </div>
      </BackgroundImage>

.header-outer-container{
    height: 225px;
}

header{
    min-height: 225px;
    background-position: right center;
}

这就是它的样子，但我希望从另一侧裁剪图像，以便城堡保持可见，就像上面的普通 css 示例一样。

Answer 1

我必须将 class .headerBG 作为我的背景图片并创建 css 看起来像

.headerBG::before{
    background-position: right center;
}

然后我不需要任何其他声明 background-position: right center; 的行导致 JS 和 CSS 看起来像

const bgImgProps: FluidObject = data.bessImg.childImageSharp.fluid
const otherImgProps: FluidObject = data.logoImg.childImageSharp.fluid

<BackgroundImage
        Tag="section"
        role="img"
        className='w-100 h-100'
        style={{
          objectFit: "fill"
        }}
        fluid={bessImgProps}
        backgroundColor={`#040e18`}
      >
         <div className='header-outer-container d-flex justify-content-center'> 
            <a className='only-gt-md' style={{height: "130px", width: "350px"}} href="/">
              <Img 
                className='w-100 h-100'
                fluid={logoImgProps}
                fadeIn={false}
                loading="eager"
                imgStyle={{objectFit: 'contain' }}
              ></Img>
            </a>
        </div>
      </BackgroundImage>

.header-outer-container{
    height: 225px;
}

header{
    min-height: 225px;
}

.headerBG::before{
    background-position: right center;
}

gatsby-background-image 在浏览器调整大小时裁剪背景图像的左侧

gatsby-background-image crop left side of background image on browser resize

javascript

css

reactjs

gatsby

gatsby-image