Is this a way of scaling images?

Question

Hi,
I've got a few questions regarding image scaling and need some advices on whether my method is correct or to throw away as quickly as possible...
I've defined all my website images in "ems" so that they rescale when the user zooms in/out the page or decreases/increases the font. I thought this would be good for accessibility purposes (?).
There are 2 tedious things with that system:
1. the image dimensions must be computed in ems,
2. the image dimensions depend on the text font size used on the page.
If I change the page font size but want to keep my images as they were previously displayed, I need to go through these calculations again. It very quickly gets seriously annoying.
I found one way of avoiding this: I define font-size:1px for each image. The great thing is that since I have body {font-size:100%}, it turns out that when the image has font-size:1px, then its dimensions are the same in pixels or ems. I mean that if I want to display my image with width:50px and height:10px, then I just need to specify width:50em and height:10em. Or at least the result is close enough not to be seen different to the naked eye. This only is useful if I am not modifying too much the page font size, e.g. font-size:0.95em to font-size:1.05em. So I thought this is great! But... there always are associated problems.
Problems found so far:
1. This only works if applied to the image, not its container (e.g. a floating div), so that the font-size doesn't propagate to any child element, e.g. a caption below the image.
2. If the image is inside a div that is floated, then I need to set a width for that div and this width needs to be calculated with respect to the normal page font size, not my 1px—if this makes sense. If I were to change my image dimension, then I'd need to change this width too.
3. It works fine with IE and Firefox, but no Safari and Opera.
Hence the following questions:
- Is this method totally absurd (as it probably sounds after my description) and/or infringing some basic rules?
- Is there anything simpler?
- Why doesn't it work in Safari or Opera?
I'd be very grateful for any comment on this. Having started HTML and CSS only 1.5 month ago and not full time, I have no feeling at this stage whether this is a correct or acceptable way of thinking or not...
Emilie

Answer 1

- Is this method totally absurd
Yes. Scaling images is very easy. Unless all your images are the same width, you will need to create an attribute selector for each image, but the principle is the same for each one.
Let's say you have an image called mypic01.jpg, which is 600px wide.
Remove the width and height attributes from the <img> tag. This displays the image at its normal size.
Create the following style rule:
img[src$="mypic01.jpg"] {
  width:50%;
  max-width:600px;
This makes the image 50% of the size of its parent element, but ensures that it never grows bigger than its maximum size. Just use the image name in place of "mypic01.jpg", and adjust the correct value for max-width.
The only drawback is that this won't be supported by IE6, which will simply display the image at its normal size. If it's important to support IE6, change from an atttribute selector to an ID selector like this:
#mypic01 {
  width:50%;
  max-width:600px;
Add the ID to the <img> tag:
<img src="mypic01.jpg" alt="my scaling image" id="mypic01" />
IE6 will ignore the maximum width, but will scale the image to 50% of the size of the parent element.