The dimensions of an image are usually defined by pixels, or if nothing is defined, it will usually be as large as it wants to be. This means that while our text usually resize when the user makes the text bigger or smaller, the images won’t.
However, using the power of CSS and ems, we can make the images scale. The trick is to leave out the width and height attribute of the image tag, and specify the image dimensions using ems in CSS. If both width and height is set, the image will loose aspect ratio and conform to the set values, if, on the other hand, only width or height is defined, the picture will keep aspect ratio.
This means that we can standardise our image sizes throughout the page, even though the original size of the images may vary. Say you have a listing with thumbnails, and all images are of varying sizes, then you can confine the images to a certain size using CSS
image.thumbnail {
width: 5em;
}
and now all thumbnail images will be exactly 5ems in width (whatever that may be on your particular page) and the height will scale accordingly. If you define only height, the width will scale accordingly. By defining all image dimensions in ems, we can make sure that the images will scale nicely with the text as things are resized on the page.
There is a problem though; image quality may be affected when the images scale. This is not a problem on the Mac, but in Windows, images may not look that good when scaled. This is either a visual loss you accept, or you can make the original image exactly the same size that the rendered image will have on the page with a normal text size in the browser. Just look at the page, count the pixels and resize your images accordingly. In this way, most people will get an image with perfect visual quality.
