Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

resize image heights

Discussion in 'Website Design Forum:' started by unbornink, Jul 7, 2011.

  1. unbornink

    unbornink New Member

    Hello,

    How can I get images to resize according to the browser height and keep the aspect ratio? (horizontal scrolling site)
    I can only every seem to get it to work with width. Do I need some form of Javascript? HTML5/CSS3?

    Thanks in advance.
     
  2. wac

    wac Senior Member

    I had this a little while ago and I found this did the trick:

    <style>

    img.bg {

    min-height: 576px;
    min-width: 1024px;


    width: 100%;
    height: 100%;


    position: fixed;
    top: 0;
    left: 0;
    z-index:-1;
    }


    (max-width: 1024px){
    img.bg {
    left: 50%;
    margin-left: -512px; }
    }
    </style>

    <body>
    <img src="images/bg.jpg" class="bg">
    </body>
     
  3. unbornink

    unbornink New Member

    thanks, unfortunately that isn't going to work for me.
    looking at it again, I think the issues is being about to scale multiple images, within divs & the divs themselves.

    www.unbornink.com/test2/

    this is what I have so far
     
  4. tbwcf

    tbwcf Active Member

    img {
    max-height:100%;
    width:auto;
    }

    Should work I think..
     
  5. unbornink

    unbornink New Member

    Thanks, but again this hasn't worked either :(
     

Share This Page