How to resize <IMG> width absolute and height relative ?

Discussion in 'HTML' started by Wladimir Borsov, May 3, 2004.

  1. As well known for <IMG ...> tags in web pages a width and a height attribute can be
    applied. What I want to do now is to fix the width for ALL the images on my web page
    to exactly lets say 70 pixel regardless how big the originals are.

    The height should be adjusted proportional so that the resulting thumbnail is not distorted.
    But as far as I know there is no such attribute like

    <IMG SRC=...... WIDTH=70 HEIGHT="Adjust proportional to Width"> ....

    How can I solve this problem ?

    As a second best solution I could accept if I could write percentage values:


    <IMG SRC=..... WIDTH=50% HEIGHT=50%>

    but this doesn't work too.

    Wladimir
     
    Wladimir Borsov, May 3, 2004
    #1
    1. Advertising

  2. [re-posted to alt.html, as the original went elsewhere for some odd reason!]

    While the city slept, Wladimir Borsov <> feverishly typed:

    > As well known for <IMG ...> tags in web pages a width and a height
    > attribute can be applied. What I want to do now is to fix the width
    > for ALL the images on my web page
    > to exactly lets say 70 pixel regardless how big the originals are.
    >
    > The height should be adjusted proportional so that the resulting
    > thumbnail is not distorted. But as far as I know there is no such
    > attribute like
    >
    > <IMG SRC=...... WIDTH=70 HEIGHT="Adjust proportional to Width"> ....
    >
    > How can I solve this problem ?
    >
    > As a second best solution I could accept if I could write percentage
    > values:
    >
    >
    > <IMG SRC=..... WIDTH=50% HEIGHT=50%>
    >
    > but this doesn't work too.
    >
    > Wladimir


    --
    Nigel Moss.

    Email address is not valid. . Take the dog out!
    http://www.nigenet.org.uk | Boycott E$$O!! http://www.stopesso.com
    In the land of the blind, the one-eyed man is very, very busy!
     
    nice.guy.nige, May 3, 2004
    #2
    1. Advertising

  3. [I think I should just go and get some sleep, really!]

    While the city slept, nice.guy.nige <> feverishly
    typed:

    > [re-posted to alt.html, as the original went elsewhere for some odd
    > reason!]
    >
    > While the city slept, Wladimir Borsov <> feverishly
    > typed:
    >
    >> As well known for <IMG ...> tags in web pages a width and a height
    >> attribute can be applied. What I want to do now is to fix the width
    >> for ALL the images on my web page
    >> to exactly lets say 70 pixel regardless how big the originals are.
    >>
    >> The height should be adjusted proportional so that the resulting
    >> thumbnail is not distorted. But as far as I know there is no such
    >> attribute like
    >>
    >> <IMG SRC=...... WIDTH=70 HEIGHT="Adjust proportional to Width"> ....
    >>
    >> How can I solve this problem ?
    >>
    >> As a second best solution I could accept if I could write percentage
    >> values:
    >>
    >>
    >> <IMG SRC=..... WIDTH=50% HEIGHT=50%>
    >>
    >> but this doesn't work too.
    >>


    You can use a server-side solution, such as PHP to do the maths. Off the top
    of my head, if you know the original image width and heght (if not, no
    problems as you can get them using PHP) something like the following should
    work;

    <? php

    $desiredwidth = 70;
    $originalwidth = 100; // replace originalwidth and originalheight with
    whatever the image dimensions are...
    $originalheight = 200; // ... or find a better way of getting them!

    $ratio = $originalwidth / $desiredwidth;
    $desiredheight = $originalheight / $ratio;

    print("<img src=\"whatever.jpg\" width=\"$desiredwidth\"
    height=\"$desiredheight\" alt=\"whatever\">\n");
    >


    I haven't thoroughly checked this, so the maths may be wrong! But it still
    shows a way to do it.

    Remember, though, that if an original image is smaller than 70 pixels wide,
    then this may result in distortion of the image as it will be stretched.
    Remember also that this is a bad way to make thumbnails of large images, as
    the full size image file still has to be loaded, regardless of how small you
    are making it appear on the screen.

    Hope that helps,
    Nige

    --
    Nigel Moss.

    Email address is not valid. . Take the dog out!
    http://www.nigenet.org.uk | Boycott E$$O!! http://www.stopesso.com
    In the land of the blind, the one-eyed man is very, very busy!
     
    nice.guy.nige, May 3, 2004
    #3
  4. Wladimir Borsov

    Mitja Guest

    Wladimir Borsov <>
    (news:c75ct8$iqe$06$-online.com) wrote:
    > As well known for <IMG ...> tags in web pages a width and a height
    > attribute can be applied. What I want to do now is to fix the width
    > for ALL the images on my web page
    > to exactly lets say 70 pixel regardless how big the originals are.
    >
    > The height should be adjusted proportional so that the resulting
    > thumbnail is not distorted. But as far as I know there is no such
    > attribute like
    >
    > <IMG SRC=...... WIDTH=70 HEIGHT="Adjust proportional to Width"> ....
    >
    > How can I solve this problem ?


    <img width="70" SRC="..."> :)

    > As a second best solution I could accept if I could write percentage
    > values:
    >
    >
    > <IMG SRC=..... WIDTH=50% HEIGHT=50%>
    >
    > but this doesn't work too.
    >
    > Wladimir
     
    Mitja, May 3, 2004
    #4
  5. Wladimir Borsov

    Mark Parnell Guest

    On Mon, 3 May 2004 15:52:15 +0100, "nice.guy.nige"
    <> declared in alt.html:

    > [re-posted to alt.html, as the original went elsewhere for some odd reason!]


    Because the OP set followups to ciwah.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, May 3, 2004
    #5
  6. Wladimir Borsov

    MarkSatterfield

    Joined:
    Jan 26, 2008
    Messages:
    10
    Location:
    Central Florida
    MarkSatterfield, Jan 26, 2008
    #6
  7. Wladimir Borsov

    MarkSatterfield

    Joined:
    Jan 26, 2008
    Messages:
    10
    Location:
    Central Florida
    Last edited: Mar 20, 2008
    MarkSatterfield, Mar 2, 2008
    #7
  8. Wladimir Borsov

    eswar

    Joined:
    Apr 20, 2012
    Messages:
    1
    Location:
    Ramanadhapuram
    please tell " how to attach the image in small size at html coding program"
     
    eswar, Apr 20, 2012
    #8
    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. =?Utf-8?B?RG90Y29t?=
    Replies:
    4
    Views:
    428
    =?Utf-8?B?RG90Y29t?=
    Nov 9, 2005
  2. Nonee
    Replies:
    7
    Views:
    688
    Nonee
    Oct 28, 2005
  3. David D.
    Replies:
    2
    Views:
    137
  4. Replies:
    7
    Views:
    198
    Tad McClellan
    Jun 22, 2006
  5. liketofindoutwhy

    getting computed style for Img width and height

    liketofindoutwhy, Apr 23, 2008, in forum: Javascript
    Replies:
    2
    Views:
    209
    liketofindoutwhy
    Apr 24, 2008
Loading...

Share This Page