Em image sizing
To the Power of M!
Demo: example here (view source)
Update: This technique also works for: em Flash sizing.
I have been seeing a lot of interest growing in how to use Ems for web page layouts. The benefits of using Ems for sizing and positioning are of course the ability to increase font size and allow users to read text at their preferred level of legibility. One thing that often goes overlooked however, is the sizing of images. These are typically left done in pixels, which is unfortunate because as the user zooms in on the page, the pictures still remain quite small by comparison. For a person with vision problems, this helps them read better, but does little to help them in terms of getting the full experience of the web page, as they have to strain their eyes to see your photos.
I began to wonder - Does it really have to be this way? Cannot we, as technically savvy web designers, figure out a way to increase picture size as well? Then it dawned on me, why not style the size of images with CSS, so that they can scale in Ems along with the rest of the body text. This will allow the normal view of the web page to be seen as intended, and will scale images up or down as necessary for those with vision impairments. Sure, this will make the image more pixelated the bigger it gets, but at least we will be taking the visually impaired into full consideration. Observe how the demo image scales perfectly with the text.
The drawback to this method is of course having to pre-define each image size. In other words, you cannot really have an arbitrarily shaped image pulled into an article, or its dimensions will be skewed to fit what you have styled in the CSS. However, many news sites and blogs generally operate with pre-set image sizes anyway, as to not throw off newspaper style layout. So, the choice is yours, go forth in confidence with the power of the M!