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

Thread: Resizing Images

  1. #1
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts

    Resizing Images

    How would I resize an image to fit the entire screen? It's what people tend to do with flash and such but I want to do it without flash...

    Examples:
    Last edited by evo; 09-23-2007 at 02:04 PM.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there evo,

    you can see an example here...
    ...and the code here...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>full page image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
        padding:0;
        border:0 solid;
        overflow:hidden;
     }
    #myImage{
        position:absolute; 
        width:100%; 
        height:100%;
     }
    #myImage img{
        width:100%;
        height:100%;
     }
    </style>
    
    </head>
    <body>
    
    <div id="myImage">
    <img src="images/blood_ball.jpg" alt=""/>
    </div>
    
    </body>
    </html>
    coothead

  • Users who have thanked coothead for this post:

    evo (09-23-2007)

  • #3
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    I need it as a background image not as a selectable object as in the links, is that possible?

  • #4
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    its litually the same (ill edit the code above )

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>full page image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
        padding:0;
        border:0 solid;
        overflow:hidden;
     }
    #myImage{
        background-image:url(myimage.png);
        position:absolute; 
        width:100%; 
        height:100%;
     }
    </style>
    
    </head>
    <body>
    
    <div id="myImage"></div>
    
    </body>
    </html>

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there evo,

    you will have to wait for CSS3 implementation for a 'stretched' background.
    coothead


  •  

    Posting Permissions

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