Half-screen image with Gatsby StaticImage

Question

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);
  }