Height: Auto in Internet Explorer 8 and below

Question

Moving towards responsive design, I'm using %s for images, e.g.:

#example img {     width: 100%;     height: auto;     max-width: 690px; // Width of the image uploaded. } 

This works great, except in Internet Explorer 8 and below. Is this due to height: auto being part of CSS3, which is only supported by IE9 onwards?

And the most important part... any suggestions on a way around this problem? The only thing I can think of so far is to give it a max-height.

Thanks

Answer 1

Try this:

img {   width: inherit;  /* Make images fill their parent's space. Solves IE8. */   max-width: 100%; /* Add !important if needed. */   height: auto;    /* Add !important if needed. */ } 

OR:

img { max-width:100%; height: auto; } /* Enough everywhere except IE8. */ @media \0screen {img { width: auto }} /* Prevent height distortion in IE8. */ 

Both solutions work. The difference is that width:inherit makes images fill their parent's space whereas width:auto maxes them at their actual dimensions. See fit.css