...

View Full Version : image autoscale w/constrained proportions



Col.html
10-17-2002, 03:25 PM
Right now I have a table that is 3x3 where the middle element is an image that is larger that the tables given proportions. This forces the table to expand around the image, making a nice frame for it. Unfortnately some of the images that I would like to display are larger than the average screen size, but not all of them. Some are 800x600 or 1024x768, but a few are irregular sizes like 905x927. I am opening the window using javascript that has it fill the screen, with all toolbars off to maximize the portion of the screen than can be used to display the image.

http://www.pestilance.org/col/Validus/validus_fighting_ash.html

What I am looking for is a way to have the images resize to fill the screen, still have my frame on the outside, and maintain the proportions of the images all at the same time. And if I can, to have it be made to function so that if the user resizes the window it will rescale the image?

Thanks in advance for your advice and patience with a rookie.

MCookie
10-17-2002, 03:36 PM
This is a simple way to do it:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
img {
width:100%;
}
-->
</style>
</head>
<body>
<img src="validus_fighting_ash.jpg">
</body>
</html>

Col.html
10-17-2002, 04:33 PM
Two out of three ain't bad, but I could have really thought of that myself...


What I am looking for is a way to have the images resize to fill the screen, still have my frame on the outside, and maintain the proportions of the images all at the same time.

MCookie
10-17-2002, 04:55 PM
<html>
<head>
<meta http-equiv=imagetoolbar content=no>
<title>CoL - Gallery</title>
<style type="text/css">
<!--
img.elastic {
width:100%;
border:0px;
}
-->
</style>
</head>
<body bgcolor="#000000" vlink=#dedede alink=#000000 link=#FFFFFF topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<center>
<table width="100%" cellpadding="10">
<tr>
<td>
<center>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="11" height="11"><img src="frame/1.jpg" width="11" height="11"></td>
<td height="11" background="frame/2.jpg"></td>
<td width="11" height="11"><img src="frame/3.jpg" width="11" height="11"></td></tr>
<tr>
<td width="11" background="frame/4.jpg"></td>
<td width="100%"><a href="javascript: self.close()"><img class="elastic" src="validus_fighting_ash.jpg"></a></td>
<td width="11" background="frame/6.jpg"></td></tr>
<tr>
<td width="11" height="11"><img src="frame/7.jpg" width="11" height="11"></td>
<td height="11" background="frame/8.jpg"></td>
<td width="11" height="11"><img src="frame/9.jpg" width="11" height="11"></td></tr></table>
<a href="javascript: self.close()">Close this window.</a></center>
</td></tr></table></center>
</body>
</html>

Col.html
10-18-2002, 12:07 PM
Thank you very much. This works well for scaling up smaller images. I will work with it to try to get it to scale them down too, so that the images of sizes like 1280x1024 will be comforably viewed, with frame, on a window that is much smaller, like 800x600. I will post whatever I come up with to add to the knowledge pool.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum