Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image autoscale w/constrained proportions

    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/Validu...hting_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.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is a simple way to do it:
    Code:
    <html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    img {
    width:100%;
    }
    -->
    </style>
    </head>
    <body>
    <img src="validus_fighting_ash.jpg">
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Oct 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Col.html; 10-17-2002 at 04:37 PM.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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>

  • #5
    New to the CF scene
    Join Date
    Oct 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks

    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.


  •  

    Posting Permissions

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