Automatic Image Resizing Demo
5 March 2006 · Last updated: 11 December 2006
I recently came across this HTML oddity. If an image is given a height, but not a width, browsers appear to enlarge it to fit the ratio of the physical dimensions of the image. So if you give an image a height twice the actual size, the browser will display it with twice the width to match. In a long image with little height, as you can imagine, increasing the height to very large sizes will result in extreme widths.
But that alone would not be worthy of mentioning. What I also discovered is that each browser I used - Firefox 1.5, Opera 9 and Internet Explorer (IE) 6 - handled images differently, when the sizes got very large indeed. Firstly, I noticed that Opera made the images blurry for all sizes. This was contrary to Firefox and IE, who both enlarged the image without blurring at all, so the pixels were always clearly visible.
Furthermore, browser 'bugs' began to creep in. Over a certain height, Opera suddenly cut the width of the image to a smaller size, which didn't match the height-to-width ratio anymore. Firefox lost the image altogether at large enough heights, displaying instead a mass of black and white stripes (only seen when scrolling, otherwise a thin black line at the top of the image space is displayed). I suspect this effect differs with various graphics cards, as it seems to be a display problem, but who knows? The only browser to successfully display the images at all heights, and with correctly adjusted widths, was IE. Sometimes Microsoft's browser does get things right.
Take a test drive of the demo yourselves and see how it appears in your browser. I'd be interested to hear from Linux and Mac users on how it looks for them. I have used Windows XP for testing myself.
The Demo
Screenshots (Windows XP)
Comments (4)
Comments are locked on this topic. Thanks to everyone who posted a comment.
- Arve Bersvendsen:
Opera's image resizing behavior is controlled by the "Interpolate images" setting in opera:config#Multimedia|InterpolateImages
Posted on 5 March 2006 at 10:12 am ¶ - Julian Schrader:
Just tested with Safari on Mac OS X Tiger (10.4.5): Height-width-ratio fits to the physical dimensions, larger versions aren't blurry but you can see every pixel. I couldn't find any bug yet.
PS: I like your site - added your feed to my newsreader...
Posted on 5 March 2006 at 12:48 pm ¶ - Anonymous:
No problems for me on Fedora Core Linux in Firefox 1.0.7! Everything looks fine, also while scrolling.
Posted on 5 March 2006 at 1:50 pm ¶ - Lynn:
Firefox 1.5.0.1 on Windows XP
No images sized to 1024 and 2048, but no stripes also. Just blank box.
Posted on 7 March 2006 at 8:03 am ¶
