使用 Gatsby StaticImage 的半屏图像

Question

我正在使用 Gatsby v.4 制作的网站。在静态页面上，模板要求背景图像略小于屏幕的一半。所有背景图像都通过 Gatsby 的“gatsby-plugin-image”插件的 StaticImage 组件加载。

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

我目前通过外部 .scss 样式 sheet 以这种方式实现此目的：

  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" }}
/>

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