Your opinion please: image width and height (in CSS) in em or percent

Giganews Newsgroups
Subject: Your opinion please: image width and height (in CSS) in em or percent
Posted by:  Stephan Bourdon (stephan.bourd…@sintlukas.be)
Date: 24 Jun 2007

Hi,

Your opinion please on the following subject: Is it acceptable to set
the width and height of an image in ems or percents in CSS?

The advantage for me is that images will scale up or down when the user
changes the font size in the browser. But what of the disadvantages?

In (X)HTML, the img-element will have a pixel-value for the width and
height-attributes.
The body CSS-style will have a font-size set, eg 12px,  and the image
sizes in CSS are calculated relative to the font size, so that an image
of 120px by 60px becomes 10em by 5em. (Similar conversion in percent,
but not yet tried.)

So if we have an img-element with id="myPicture", the CSS-style would be

  #myPicture {
            width: 10em;
            height: 5em;
  }

There seem to be problems with this in IE6 (IE7 not yet tested), but
I'm looking at a workaround. In order to avoid needless work, I'll
rephrase my question: Are there reasons not to have scaleable images
(with CSS) in a page, other than pixelation effects?

Thanks for reading up to here and I welcome your feedback.

Best Regards,

Stef

Replies