• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

resize image heights


#1
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.
 

wac

Senior Member
#2
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>