[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;
</script>
NOTE: Make sure that you don't have a css declaration somewhere else that
may override this script.
</tip>
Frank Marion lists at frankmarion.com Keep the signal high.
More information about the thelist
mailing list