Image with ratio constraint are not rendered the same between 3.2.x and 3.3.x

[Stouffi]

Since v3.3.x I have a different behavior about how Image are rendered when neither width nor height are provided and instead a ratio constraint is given. Up to v3.2.3 the image is rendered as expected given the ratio specified by className on Image component. But from v3.3.x, the image is rendered using its intrinsic aspect ratio and does not cover the box defined by the given ratio, which in a way result in a degraded UI.

@mantine/core@3.3.4 https://codesandbox.io/s/xenodochial-pateu-5kgxt?file=/src/App.tsx

@mantine/core@3.2.3 https://codesandbox.io/s/flamboyant-hooks-3vqhr?file=/src/App.tsx

With these two codesandbox you can see that with v3.3.4, the square ratio is not fully covered by the Image.

This appears to be caused by the new wrapper element which have unset width and height and therefore make the underlying img element not able to fit-cover like it did in v3.2.3.

[rtivital]

We had to change Image component internals because there was a bug with caption not being visible when the image overflowed its container. I've tweaked things a little in codesandbox and here is a possible solution – https://codesandbox.io/s/naughty-brook-el8bd?file=/src/App.tsx Let me know if it works for you

[Stouffi]

Thanks for your explanation and your suggestion looks acceptable to me. That will do the trick.

[rtivital]

Okay, feel free to reach out if you have any other questions or issues.