Results 1 to 7 of 7

Thread: Looking for code to auto resize images with window resize without reload

  1. #1
    Join Date
    Apr 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2005
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    if you are using an img tag, then you can just add a width="nummber" height="number"

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    spyder,

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2005
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    oops, sorry, i thought that the example is what it was doing, and that they didnt want that

  6. #6
    Join Date
    May 2005
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    the example picture is 600x800, i am pretty sure it resizes automatically

  7. #7
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •