CSS3 Image Height auto

Question

In the process of testing a jQuery Mobile site on IE9 I discovered that something along the lines of

<img src=... width='100%' height='auto'/>

does not work with IE9 - the image appears as a long horizontal line with no height. It seems like IE does not to understand the auto attribute or appears to interpret it as meaning 0 . Leaving it out the height attribute altogether does the trick - the image appears as desired and this seems to be OK with all the other browsers too.

Problem solved? Well, not quite since this leaves me feeling a tad confused. I had always believed that specifying image height and width helps the browser with the job of rendering the page since it knows just how much space it needs to earmark for the image before it has been fetched. So the "leave out the height = auto" trick would mean that page rendering would slow down since the browser would hold off on fetching other page resources till it has got the image data and established the page layout yet to come?

Answer 1

"the browser would hold off on fetching other page resources till it has got the image data and established the page layout yet to come?" Is wrong. This hasn't been the case since netscape. In fact this was one of the key innovations in netscape that the page would continue to render till the image was fetched, size determined and page was simply "reflowed".

As mentioned in the comment. Remove the height if you do not know it. Setting it to auto does not help the browser in any way.