[web-tips > image to text size]
Text & Image Zoom
Note that the image and text on this web page remains about the same relative sizes through all zooms -- try it.
This is accomplished by: a) using em's instead of pixels for images (note: there are no sizes used in the img tag link); b) and by using css to place the image. Please check out the css source code for this site. You will find:
.floatright img
{
height: 12.5em;
width: 18.75em;
}
If you use only em's for all positioning, then your entire page will zoom holding the layout relatively stable.
One last thing -- people are often afraid to use em's because "What the heck is an 'em' anyway?" Well, you can simply things considerably by thinking of an em as a scaling pixel. If you use em's in your images, instead of pixels, then the sizes of your images will vary with text size (i.e., zoom level).
Now, to go from pixels to em's is really simple, just divide by 16. For example, if your image is 200 pixels high by 300 pixels wide, then the em translation to css would be "height: 12.5em;" and "width: 18.75;".
To see this technique in action for an entire web site, please review this link: Earth Stones
