[thelist] JS: Resizing an image? [Solved] + tip

Frank lists at frankmarion.com
Fri Aug 26 10:33:53 CDT 2005

Solved. The reason my image wasn't resizing was because I still had it's 
size declared in an external css file. As soon as I removed the 
declaration, the script functioned as it should.

<tip type="resizing an image with javascript" author="Frank Marion">

You may want to resize an image via javascript for any number of 
reasons.  Here are the basics:

In the later browsers, an image can be resized by simply assigning it a new 
height or width via either a) the attributes (<img src="" height="100">) or 
via a css declaration (height:100px;) or both.

You can then use js to alter these paramaters directly:

myImageID.height =100;

Now you may want to make the size of the image in relation to it's parent 
container for any reason. You need to

1) Specify which container
2) Specify which image
3) Get the size of the container
4) Set size of the image to the size of the container.

The following is the simplest of scripts to set the height of the image to 
that of the parent container.

   <script type="text/javascript">

     // Define which image to resize
     i = document.getElementById('artist_portrait')  // your image id

     // Get the height of the parent container
     h = document.getElementById('container').offsetHeight;  // your div id

     //  Set the image high tothat of the container height
     i.height = h;


NOTE: Make sure that you don't have a css declaration somewhere else that 
may override this script.


Frank Marion     lists at frankmarion.com      Keep the signal high.

More information about the thelist mailing list