PDA

View Full Version : Looking for code to auto resize images with window resize without reload



kms_web
04-23-2005, 11:48 PM
I don't know if there is a script listed for this already on here because I'm not sure what I'm looking for. The image size on a web page slides larger or smaller as you resize your browser window. Here is an example of what I mean-

http://community.webshots.com/photo/152576242/152576242cQoOXw

If you go to webshots and view a photo, when the page is finished loading, if you resize your window, the image gets smaller or bigger as you do it.
In my search for code to do this, I did find one similar, but the image had to reload with each resize.
I am looking for one that does it like webshots does.
Please help

jscheuer1
05-05-2005, 07:16 AM
The only script involved in that bit of magic is opening a new window with its source (url) being the image itself. This shows one way of opening new windows:

http://www.dynamicdrive.com/dynamicindex8/popwin.htm

The image must be larger than the dimensions of the window generated for anything special to happen.

spyder
05-21-2005, 08:20 PM
if you are using an img tag, then you can just add a width="nummber" height="number"

jscheuer1
05-21-2005, 09:48 PM
spyder,

Did you even look at the OP's example of what they wanted?

spyder
05-22-2005, 12:04 AM
oops, sorry, i thought that the example is what it was doing, and that they didnt want that

spyder
05-22-2005, 12:08 AM
the example picture is 600x800, i am pretty sure it resizes automatically

atbest
11-06-2009, 09:32 PM
This trick is pure html...
I don't quite understand where you want to set the picture.
If it is the entire page, then sizing your image slightly larger than page to get the best quality, (usually 1280x650).
Add your <img src> just below the <body>

<img src="tree.jpg" width="100%" height="100%">

You can then trick the computer, letting one table appear in the image. Other tables can be add inside the one table.
This is done by adding the words (align="right") into the code so it looks like this.

<img src="tree.jpg" align="right" width="100%" height="100%">

If your text exceeds the image height you will get the background.
To fix this, add scrolling into your table.
Altogether, it should look like this...

<html><head></head><body>
<img src="treel.jpg" align="right" width="100%" height="100%">
<div style="overflow:auto; height:400px; width:100%">
<table width="100%" height="100%">
<tr><td align="left">
<font size="+4" style="text-decoration:underline">TITLE GOES HERE</font>
</td></tr>
<tr><td align="left">
<font size="+2">KEEP PUTTING CONTEXT HERE AND AFTER AWHILE A SCROLL BAR WILL APPEAR ON THE RIGHT</TD></TR>
<tr><td align="left">
<font size="+2">FOOTER CONTENT HERE</font>
</td></tr>
<table width="100%">
<tr>
<td><a href="http://LINK GOES HERE style="TEXT-DECORATION: none"><font color="#000000" size="+2"><b>NAME OF LINK HERE</b></font></a></td>
<td><a href="http://LINK GOES HERE style="TEXT-DECORATION: none"><font color="#000000" size="+2"><b>NAME OF LINK HERE</b></font></a></td>
<td><a href="http://LINK GOES HERE style="TEXT-DECORATION: none"><font color="#000000" size="+2"><b>NAME OF LINK HERE</b></font></a></td>
</tr></table>
</table>
</div>
</body>
</html>

Hope this helped.