Gatsby Image: Working fix to have image properly resize.

[martink-rsa]

ArticleImage / gatsby-image does not behave very well, and makes it very difficult to get it to fit the container.

This issue here mentions a fix which I've tested to be working: https://github.com/gatsbyjs/gatsby/issues/15167

<div style={{ maxHeight: "100%", height: "45px" }}>
  <Img
    style={{ maxHeight: "100%" }}
    imgStyle={{ objectFit: "contain" }}
    fluid={data.placeholderImage.childImageSharp.fluid}
  />
</div>

I think the key difference is the imgStyle prop that is being used, which I think gatsby-image uses to style the image.

I've recreated it here and it's been working:

We are often having to dodge using ArticleImage. We need to have this applied to our Article Image without it breaking our other images.