[SOLVED] Half-screen image with Gatsby StaticImage

Half-screen image with Gatsby StaticImage

I am working on a website made with Gatsby v. 4. On static pages the template expects a background image that takes up slightly less than half the screen. All background images are loaded via the StaticImage component of Gatsby's 'gatsby-plugin-image' plugin.

Is there a way to get this background image by using the height and width (or other) attributes of Gatsby's StaticImage component?

I am currently achieving this through an external .scss style sheet in this way:

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

Solution

You have exposed an style or imgStyle props in both: StaticImage as well as GatsbyImage.

style: Inline styles applied to the outer wrapper.
imgStyle: Inline styles applied to the <img> element.

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

Depending on how's your JSX structure you may want to use one or another but answering your question: yes, there's no need of using an external .scss file, you can use inline styles as desired:

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

Use whichever works better for your scenario.