IE doesn't support height=auto for images, what should I use?

Question

I have some images with height=auto because sometimes they are different heights whereas they are always the same width. It works in every browser but I.E., is there someth

Answer 1

height: initial; will work instead of using height: auto; in chrome and ie.

Answer 2

There is also an IE issue when using images with height=auto within flex containers.

For me personally, the issue was caused due to the image being placed within nested flex containers. I was able to remove the parent flex container and the issue was resolved for me.

There are a few more work around solutions that people have mentioned in the page below: https://github.com/philipwalton/flexbugs/issues/75

Answer 3

In "IE9 compatibility view - IE7 Standard Document mode" leaving off height=auto may not solve the problem. Try adding conditional CSS and in your special css file for IE ("ie.css") add a line that assigns the appropriate min-height to your affected class/element.

for example:

.IE7 .[css element] {min-height: xxxpx;}

Where xxx equals the necessary image height.

Answer 4

For Edge browser you can use max-height, which will also work for other browsers

max-height: 100%;

Answer 5

I had the same problem and fixes with min-height and !important didn't work for me. My img was in a flex container. I then tried putting the img inside another, wrapping div and then height:auto worked.