Scalable Images with CSS

If you use ems to define an image’s height property, the image will be scaled relative to an implicit 1em text height.

For example, here is code to display the same image twice — first normally, then scaled to exactly five times the normal text height:

<p>Normal: <img src="http://anoved.net/images/cssize/flower.jpg" />
 Scalable: <img src="http://anoved.net/images/cssize/flower.jpg" style="height:5em;" /></p>

Here is how these images appear:

Normal:
Scalable:

Try using your browser’s controls to increase or decrease the displayed text size. The first instance of the image will remain the same as the neighboring text changes size, but the second instance of the image will grow or shrink with the text, preserving the proportions of the original design.

I use this trick to fit my impish logo in the title bar at the top of the page regardless of the visitor’s text size preferences. It works surprisingly well in contemporary browsers, but of course it looks dumb without CSS. The scaling does appear to be off by one pixel at alternating sizes in Safari.

Worth noting is that Opera scales the entire page layout instead of just textual elements, which strikes me as clever and correct.

Comments and technical corrections welcome.

Posted on Wednesday, January 16th, 2008. Tags: code.