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

[Stephan Bourdon]

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

[David E. Ross]

On 6/24/2007 11:19 AM, Stephan Bourdon wrote:

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

If your images are page decorations (e.g., ornamental lines separating
sections of text) or navigation buttons, relative sizing might be a good
idea.

However, I carefully size illustrations needed to help explain concepts
in the text and photographs to fit 800x600 resolution without horizontal
scrolling, even with a vertical toolbar on one side. I then use
absolute sizing. I also use absolute sizing for small images (e.g., a
40x40 px image of a house for a link to return to my home page).

--

David E. Ross
<http://www.rossde.com/>.

Don't ask "Why is there road rage?" Instead, ask
"Why NOT Road Rage?" or "Why Is There No Such
Thing as Fast Enough?"
<http://www.rossde.com/roadrage.html>

[Bergamot]

Stephan Bourdon wrote:

>
Is it acceptable to set
the width and height of an image in ems or percents in CSS?

what of the disadvantages?

Browsers tend to do a lousy job of scaling images, especially enlarging
them. Images are pixel-based elements, and will always look best when
left at their actual dimensions.

--
Berg

[Chris F.A. Johnson]

On 2007-06-24, Bergamot wrote:

Stephan Bourdon wrote:

>>
Is it acceptable to set
the width and height of an image in ems or percents in CSS?

what of the disadvantages?

Browsers tend to do a lousy job of scaling images, especially enlarging
them. Images are pixel-based elements, and will always look best when
left at their actual dimensions.

That depends very much on the image. Photographs, especially JPEGs,
often enlarge (and reduce) quite well, even in a browser. It really
depends on the image file in question.

Images with hard-edged lines may not fare as well.

Try your images in various sizes. in various browsers, to see
whether the result is acceptable.
--
Chris F.A. Johnson <http://cfaj.freeshell.org>
========= Do not reply to the From: address; use Reply-To: ========
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

[Hans-Peter Diettrich]

Chris F.A. Johnson wrote:

>>Browsers tend to do a lousy job of scaling images, especially enlarging
them. Images are pixel-based elements, and will always look best when
left at their actual dimensions.

That depends very much on the image. Photographs, especially JPEGs,
often enlarge (and reduce) quite well, even in a browser.

That's valid for all *large* pixel-based images.

Like with fonts, vector-based images are designed for scaled output,
pixel-based images are not.

DoDi

[Andy Dingley]

On 24 Jun, 19:19, Stephan Bourdon <[e-mail]>
wrote:

>Is it acceptable to set the width and height of an image in ems or percents in CSS?

Yes, but it will cause scaling, and that's itself bad.

For an "eye candy" image, I'd potentially do this. Most such images
are 1 dimensional anyway and so scale or stretch in the other
dimension without problems. OTOH though, I'd be more likely to display
such an image by use of a CSS background anyway.

For a "content" image, I wouldn't do this, as client-side scaling is
too ugly. Instead I'd use fluid design to reconcile an image in a
fixed pixel size with text sixed in ems.

[David Stone]

In article <0r******************************@iswest.net>,
"David E. Ross" <no****@nowhere.notwrote:

On 6/24/2007 11:19 AM, Stephan Bourdon wrote:

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?

[snip]

If your images are page decorations (e.g., ornamental lines separating
sections of text) or navigation buttons, relative sizing might be a good
idea.

However, I carefully size illustrations needed to help explain concepts
in the text and photographs to fit 800x600 resolution without horizontal
scrolling, even with a vertical toolbar on one side. I then use
absolute sizing. I also use absolute sizing for small images (e.g., a
40x40 px image of a house for a link to return to my home page).

For some images, I've had good results using % sizing. One caveat: I
deliberately made the images larger than needed to "fit" in the layout
using default browser settings at 640x480. I also use a very limited
colour palette, and avoid gradients. For illustrations, I follow
the same route as David Ross. Sometimes, I'll use a smaller version and
link it to a high resolution version (depends on what the image is there
for.)