[gatsby-image] object fit is not configurable

[jonathan-chin]

It took me a while to uncover this, because I was using gatsby-plugin-sharp and react-flexbox-grid, so I was investigating those. However, it seems that gatsby-image only loads images within their wrapper as object-fit: cover. With certain aspect ratios, this cuts off the edges. For example:

https://imgur.com/a/jW8kg

The lefthand side is ever so cropped (so is the righthand side of the whole image but it's less noticeable there so I just snapped the left side). I looked into the source of gatsby-image and the css style is hardcoded as cover. Is there a way to allow it configurable to be either cover or contain?

[KyleAMathews]

@jonathan-chin happy to take a PR to make gatsby-image more configurable.

[tsriram]

@KyleAMathews sounds okay to add a new prop imgStyle which can be spread into img element?

[KyleAMathews]

@tsriram yeah, that'd be great!