Gatsby StaticImage 的半屏图像

Question

我正在开发一个使用 Gatsby v. 4 制作的网站。在静态页面上，模板需要一个占屏幕一半以下的背景图片。所有背景图片都是通过 Gatsby 的“gatsby-plugin-image”插件的StaticImage 组件加载的。

有没有办法通过使用 Gatsby 的 StaticImage 组件的 height 和 width（或其他）属性来获取此背景图像？

我目前正在通过外部.scss 样式表以这种方式实现这一点：

  img {  
    height: calc(50vh);
    width: calc(300vh);
  }

Answer 1

您在StaticImage 和GatsbyImage 中都暴露了style 或imgStyle props。

• style: 应用于外包装的内联样式。
• imgStyle：应用于<img> 元素的内联样式。

来源：https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#shared-props

根据您的 JSX 结构，您可能希望使用一种或另一种但回答您的问题：是的，不需要使用外部 .scss 文件，您可以根据需要使用内联样式：

<StaticImage
  imgStyle={{ width:"300vh", height:"50vh" }}
  style={{ width:"300vh", height:"50vh" }}
/>

使用更适合您的场景的那个。