Using Em

From CSS Discuss

Jump to: navigation, search

For the sake of accessibility and readability, you can make your images resize along with the text by settings the dimensions to the equivalent ems instead of pixels. This particularly applies when you have a diagram with text in the page that people might want to scale up or down to make it easier for them to read.

For example, for image about 130 pixels square (when the calculated font size is 13px) that resizes with the text, one could use the following code:

<img id="resizeme" src="my_image.gif" alt="" />

combined with the css: img#resizeme {

height: 10em;
width: 10em;

}

David Dorward says:

"Remember, images do not scale well at the best of times, and browsers are not very good at scaling images. If you try to scale up text embedded in an image it will quickly show jaggies. Always use real text if you can."

To avoid up-scaling problems, consider using images with intrinsic dimensions large enough to handle a 200% resize (more if your site is intended for the sight-impaired). Browsers usually scale-down well. See Using Percent for a discussion of this issue.

jake c.: I tried that, but I wasn't too happy with the result. Pictures are bigger - thus loading slower - and not sharp enough at normal viewing size.

shawn: Using em for images really (in my opinion) just should get used with simple GIFs or PNGs that have text in the images (maybe network digrams or bar charts or something), where the images tend to optimize fairly small to begin with (so you can make them larger) and don't have many complexities (so the browsers don't distort them much on resize). With more complex images (and definitely with photos) you'd do better with a thumbnail you can click on for the larger size or a really good description. I've only really used this technique once, so I by no means recommend doing this for everything.

See also:

Personal tools