GatsbyImage (gatsby-plugin-image) objectFit contain issues with blurred placeholder

[cymkd]

Hi! Migrated to the new gatsby image before launching an ecommerce and found some issues with styling new GatsbyImage.

Goal is to do a simple height: '100%', on the wrapper, and objectFit: 'contain' on the img.
Yet the result is a blur that doesn't disappear.

Tried variations of:
layout: CONSTRAINED in the query,
objectFit, style, imgStyle in the props (how we used to do it in gatsby-image or simply via css targeting)
targeting the wrapper and img with pure css.

The blur appears once height: '100%', is introduced to the wrapper or display: flex is given to the wrappers parent.
Otherwise the whole wrapper height is following the image height.

I know query height can be used but what happens if the containers height is dynamic on breakpoints etc which is often the case.

If anyone have any suggestions we'r all eyes 🙇

[cymkd]

Was missing gatsby-plugin-image in gatsby-config = 🧠 🥇