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

resize image heights


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.


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


img.bg {

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

width: 100%;
height: 100%;

position: fixed;
top: 0;
left: 0;

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

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