CODEWITHSUNDEEP
cssscalingfont-size
Ed Heal
Ed Heal

Reputation: 59997

Using em instead of pt

I was reading Web Content Accessibility Guidelines 1.0 (sec 3.4, page 13) where it says to use em rather than pt.

My question is that the images that you develop for a web site are done in terms of pixels. So if you are using relative sizing for them, the browser will have to scale them. Is there any good techniques to ensure that the pictures do not get too distorted (i.e. bits become too blurred etc)? Alternatively if you chose not to scale the images, is there any techniques to ensure that the layout does not get corrupted?

Upvotes: 1

Views: 115

Answers (3)

Marat Tanalin
Marat Tanalin

Reputation: 14123

It generally does not make sense to specify image dimensions in em. It would not improve anything and would just make images blurred. Use em for text only, and let images be kept in their original size. Additionally, you can use IMG {max-width: 100%} if don't want images to overflow their container on narrow browser-window sizes.

Upvotes: 1

devdigital
devdigital

Reputation: 34349

I recommend you have a read of Responsive Web Design by Ethan Marcotte. He talks about a technique of not specifying any height/width on your img tags, and instead set the max-width to 100%:

img {
   max-width: 100%;
}

In fact, this will work for any fixed-width elements like videos/flash etc

IE6 and below don't support max-width properly, so you can set width: 100%; instead, which is a basic workaround.

The book also explains how to use AlphaImageLoader to improve image scaling in IE7 and below.

Upvotes: 1

yurisich
yurisich

Reputation: 7119

Check out the bottom of this sizing study done to compare px to em sizing techniques as images grow larger/render at lower percentages.

Under the section titled "Information", there is even more to look at.

It appears you just have to keep playing with the number after the decimal point, and get those F5 muscles stretched and limber. ;)

Upvotes: 1

Related Questions