MSIE: Variable Image Size

[Stephan Heckmueller]

Hi.
Is there any possibility to specify an image's size in IE relatively to
the current font-size while keeping the ratio of width and height? At
the moment i'm using <img [...] width="10em">, but IE seems to modify
the image proportions. Without any font-relative size-specification the
imags keeps its size regardless of changes in font-size.

thanks,
Stephan

 

[Steve Pugh]

Is there any possibility to specify an image's size in IE relatively to
the current font-size while keeping the ratio of width and height?

Do you know what the natural ratio of width and height?
If you do then just specify both in em.

i.e. if the image is 10px by 14px you can specify it as being 1em by 1.4em
and it will then scale in proportion.

At the moment i'm using <img [...] width="10em">,

Does that actually work? It's totally invalid.

but IE seems to modify
the image proportions. Without any font-relative size-specification the
imags keeps its size regardless of changes in font-size.

Yes. As browsers do a really bad job of resizing images that isn't
necessarily a bad thing.

Steve

 

[Nik Coughlin]

<img style="width:10em">

Yes. As browsers do a really bad job of resizing images that isn't
necessarily a bad thing.

You can optimise the images to be scaled downwards by the browser rather
than upwards, downwards resizing usually looks fine if you soften the master
image a little.

For example, this is the master image:
http://www.ross930.org.nz/images/buttonNews1.jpg

Look at its usage on the page:
http://www.ross930.org.nz/

It scales with the text, which is I guess what you are trying to do.

 

[Stephan Heckmueller]

Do you know what the natural ratio of width and height?

If you do then just specify both in em.

i.e. if the image is 10px by 14px you can specify it as being 1em by 1.4em
and it will then scale in proportion.

The changes of image-proportions are less visible, but still there.

At the moment i'm using <img [...] width="10em">,

Does that actually work? It's totally invalid.

<img style="width:10em">

No. I didn't think about syntax...

 

[Stephan Heckmueller]

You can optimise the images to be scaled downwards by the browser rather
than upwards, downwards resizing usually looks fine if you soften the master
image a little.

For example, this is the master image:
http://www.ross930.org.nz/images/buttonNews1.jpg

Look at its usage on the page:
http://www.ross930.org.nz/

Thought about that, too. But this leads to another problem: Some older
browsers don't recognize the relative size-specifications. So, for
example, those buttons on your website are as big as the original image.

It scales with the text, which is I guess what you are trying to do.

Yes, exactly as described in my initial posting...

 

[Steve Pugh]

The changes of image-proportions are less visible, but still there.

There will be cases where the em values don't come out to an exact
number of pixels and end up being rounded. At worst the height might
be rounded down and the width rounded up (or vice versa). But that
will happen however you scale the images.

e.g. If you took the example 10x14 image and scaled it to be 60% of
the size it would be 6x8 which is a slight distortion of the
proportions.

The only solution to that problem is to always use square images.

Steve

 

[Nik Coughlin]

Thought about that, too. But this leads to another problem: Some older
browsers don't recognize the relative size-specifications. So, for
example, those buttons on your website are as big as the original
image.

Who cares? Do you know what percentage of people use those browsers? The
page will still be usable for them, it just won't be pretty. People used
antiquated browsers should be used to pages looking crap.

 

[neredbojias]

Without quill or qualm, "Nik Coughlin" <nrkn!hopefully no
[email protected]> quothed:

Who cares? Do you know what percentage of people use those browsers? The
page will still be usable for them, it just won't be pretty. People used
antiquated browsers should be used to pages looking crap.

Yep. I second that.

 

[Stephan Heckmueller]

There will be cases where the em values don't come out to an exact
number of pixels and end up being rounded. At worst the height might
be rounded down and the width rounded up (or vice versa). But that
will happen however you scale the images.

e.g. If you took the example 10x14 image and scaled it to be 60% of
the size it would be 6x8 which is a slight distortion of the
proportions.

The only solution to that problem is to always use square images.

Steve

When using "em" (and not "%") it should depend on whether you're using
whole numbers
for the "em"-specifications. In that case there can only be as many
rounded values as
rational "em"-specifications, because the product of font-size and a
whole number should result in a whole number, too.
So it should work if height divides width (or vice versa).
Anyway, it doesn't in MSIE.

For "%" you're right, of course.

bye,
Stephan