MSIE: Variable Image Size

Discussion in 'HTML' started by Stephan Heckmueller, Nov 19, 2004.

  1. 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
    Stephan Heckmueller, Nov 19, 2004
    #1
    1. Advertising

  2. Stephan Heckmueller

    Steve Pugh Guest

    On Fri, 19 Nov 2004 15:52:16 +0100, Stephan Heckmueller
    <-hamburg.de> wrote:

    > 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.

    <img style="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.


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

    Steve
    Steve Pugh, Nov 19, 2004
    #2
    1. Advertising

  3. Stephan Heckmueller

    Nik Coughlin Guest

    Steve Pugh wrote:
    > On Fri, 19 Nov 2004 15:52:16 +0100, Stephan Heckmueller
    > <-hamburg.de> wrote:
    >
    >> 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?

    >
    > <img style="width:10em">


    <snip>

    > 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.
    Nik Coughlin, Nov 20, 2004
    #3
  4. > 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, Nov 20, 2004
    #4
  5. Nik Coughlin wrote:
    > 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...
    Stephan Heckmueller, Nov 20, 2004
    #5
  6. Stephan Heckmueller

    Steve Pugh Guest

    On Sat, 20 Nov 2004 11:53:38 +0100, Stephan Heckmueller
    <-hamburg.de> wrote:

    >> 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.


    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
    Steve Pugh, Nov 20, 2004
    #6
  7. Stephan Heckmueller

    Nik Coughlin Guest

    Stephan Heckmueller wrote:
    > Nik Coughlin wrote:
    >> 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.


    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.
    Nik Coughlin, Nov 20, 2004
    #7
  8. Stephan Heckmueller

    neredbojias Guest

    Without quill or qualm, "Nik Coughlin" <nrkn!hopefully no
    spam!@woosh.co.nz> 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.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    neredbojias, Nov 21, 2004
    #8
  9. Steve Pugh wrote:
    > 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
    Stephan Heckmueller, Nov 22, 2004
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Koen
    Replies:
    2
    Views:
    1,332
    Scott G.
    Jun 28, 2004
  2. James_patageul
    Replies:
    2
    Views:
    1,704
    Curt_C [MVP]
    Nov 16, 2004
  3. Replies:
    2
    Views:
    452
  4. Jason Cavett

    Preferred Size, Minimum Size, Size

    Jason Cavett, May 23, 2008, in forum: Java
    Replies:
    5
    Views:
    12,556
    Michael Jung
    May 25, 2008
  5. Bob Richardson
    Replies:
    3
    Views:
    230
    Bob Richardson
    Mar 8, 2005
Loading...

Share This Page