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.
2 Comment
Posted by
krishna on 26/6/08 1:23 PM:
Helped to me to assure that there is way that image is scalable.
But in whcih browsers it works?
If my style is like background: #fc0 url('image.jpg'), how will it work??Posted by
Jim on 26/6/08 2:11 PM:
I've tested this with Firefox 2, Safari 2/3 (Webkit), and IE 6/7. Firefox 3 and Opera appear to scale all images anyway.
I don't know how to achieve similar results with CSS background images.