IE8 not displaying Img element correctly when a la

Question

I have an image element like the following

<img src="someImage.jpg" height="26136" width="918" />

In IE8, this image does not render correctly. The height of the rendered image is squished down into what looks like 1 pixel. However, if I instead set the height by CSS styles, the image is rendered correctly.

Answer 1

As in the comment, I made this test image:

http://i.stack.imgur.com/M2Olq.jpg - I'm not going to inline it here :)

I'm testing with bona fide Internet Explorer 8 / Windows 7.

This test has your described behaviour:

http://jsfiddle.net/K5ydt/

I kept tweaking the height to try to find the limit. When I got to it working with 16000, but not working with 17000, I tried the number 16384, which is the maximum value of some integer data type (or something like that, I can't remember precisely what).

And sure enough:

• 16384 works.
• 16385 does not work.

I couldn't find a way to "fix" this, and there probably isn't one. I think you'll have to use this instead:

<img src="http://i.stack.imgur.com/M2Olq.jpg" style="width:918px; height: 26136px" />

Also, not specifying dimensions works:

<img src="http://i.stack.imgur.com/M2Olq.jpg" />

---

Interestingly, IE9 also appears to suffer from the same problem.

I tested with http://ipinfo.info/netrenderer/ + http://fiddle.jshell.net/K5ydt/show/light/ - the result: a 1px high image.