CODEWITHSUNDEEP
javascripthtmlcsssafari
Igor Sobayev
Igor Sobayev

Reputation: 49

Safari ignore height auto in img in mobile devices

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:

enter image description here

And this is how it is supposed to look like:

enter image description here

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.

Upvotes: 1

Views: 760

Answers (1)

Igor Sobayev
Igor Sobayev

Reputation: 49

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 :)

Upvotes: 1

Related Questions