Proportional images

Discussion in 'CSS' started by coo, Apr 21, 2006.

0
  1. #1
    Hallo,
    I would open a popup with an images "fullscreen".
    I resize my window to max size of user browser.
    Than I set the width of my image to 100% ... so height is set by browser proportionally.
    It's ok with firefox.. but don't work in safari.
    When the width is equal the original size it's ok... but if the width is more larger the image are distorced.

    This is my code:

    #box{margin:0px;
    width:100%;
    height:100%;
    overflow:auto;
    }

    img#full{
    width:100%;
    }

    <div id=box><img id=full scr=myimage.jpg>


    Can you help me???
    (sorry for my bad english, I hope you understand :rolleyes: )
     
    coo, Apr 21, 2006 IP
  2. Rifat

    Rifat Guest

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try doing this:

    CSS code:
    html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
    body {font-family:verdana, arial, sans-serif; font-size:76%;}
    #background{position:absolute; z-index:1; width:100%; height:100%;}
    #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
    #content {padding:5px 300px 20px 200px;}
    p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
    #fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}

    Then put this in the body section:
    <div>
    <img id="background" src="yourimage.jpg" alt="" title="" />
    </div>

    Then put the content and scroller in between your content.
    I got this idea from http://www.cssplay.co.uk/layouts/background.html.
     
    Rifat, Apr 21, 2006 IP