How do I make a Gatsby image as large as possible in a container without sacrificing aspect ratio?

Question

Essentially, I'd like to replicate object-fit: contain behaviour but using gatsby-plugin-image to get the benefits of the image processing and source selection.

Answer 1

Both, StaticImage and GatsbyImage has a bunch of shared props. In your case, objectFit is what you are looking for. By default, it takes cover as value but you can change it to contain. For example:

<StaticImage src="some/url.extension" objectFit="contain" />