-
Looking for code to auto resize images with window resize without reload
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/...52576242cQoOXw
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
-
-
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.
-
-
if you are using an img tag, then you can just add a width="nummber" height="number"
-
-
spyder,
Did you even look at the OP's example of what they wanted?
-
-
oops, sorry, i thought that the example is what it was doing, and that they didnt want that
-
-
the example picture is 600x800, i am pretty sure it resizes automatically
-
-
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.
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Reply With Quote
Bookmarks