The Frog (Image Resizing Demo) Information

Resizing the browser window may allow you to stretch the image up and down, or left to right. But most browsers only allow this in Quirks Mode. Switch to XHTML Strict Mode, and the image may be resized only by the width. Or it may resize proportionally, so the width and height match the original shape of the image. See how different browsers treat the image from the notes below.

VIEW THE DEMO

Notes

Firefox 2

Resizes the height and width to match the proportions of the image in XHTML Strict mode. In Quirks Mode resizes both height and width to match the window.

Firefox 3

Resizes the height and width to match the proportions of the image in XHTML Strict mode. In Quirks Mode resizes both height and width to match the window. Only resizes down to a certain width.

Internet Explorer 7 (Emulation Mode in IE8 Beta 1 used)

Resizes the height and width to match the proportions of the image in XHTML Strict mode. In Quirks Mode resizes both height and width to match the window, but not so you can see the whole image.

Makes the height of the image taller depending on the length of the whole page. Adding more text here makes the image taller. Less text makes it shorter.

Internet Explorer 8 Beta 1

Resizes the height and width to match the proportions of the image in XHTML Strict mode. In Quirks Mode resizes both height and width to match the window, but not so you can see the whole image.

Makes the height of the image taller depending on the length of the whole page. Adding more text here makes the image taller. Less text makes it shorter.

Opera 9.25

Fails to show the image properly in XHTML Strict mode. (The height is reduced to a thin line.) In Quirks Mode resizes both height and width to match the window.

Opera 9.5 Beta

Only resizes the width of the image in XHTML Strict mode. In Quirks Mode resizes both height and width to match the window.

On my monitor setting of 1280 x 1024 pixels, using a maximised window, Opera initially appears to show the frog slightly squashed (with less height than is needed to display the image proportionally). The image size is actually 1000 x 750 pixels. A screenshot confirms the height is that of the image unstretched. Opera is therefore only stretching the width.

Safari 3 (on Windows XP)

Resizes both height and width to match the window in both Quirks Mode and XHTML Strict Mode. But sometimes gets stuck, failing to resize the image, only the window.

By Christopher Hester 30th March 2008 · Last updated: 31st March 2008