Safari ignore height auto in img in mobile devices

Question

I have a website developed with HTML, CSS (Bootstrap), JS and PHP. The problem came with the images in Safari. My img tag has a class img-fluid which has this to it's CSS:

max-width: 100%;
height: auto;

All works fine in all devices, except in Safari.

This is how it looks in Safari:

And this is how it is supposed to look like:

This happens to all the images in the web.

I have this meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

I think the problem is that Safari ignores the height: auto; and all the images shrink to 100% of the container height, or something like that.

Answer 1

The problem was with the display of the parent container. I change de display: flex to display: block in the parent div ( div which contains the img tag) and the images start to working fine.

Thanks Problem Child for give me the right way:)