How to resize image automatically on browser width resize but keep same height?

Question

I am trying to replicate the same effect that this website has: http://www.knockknockfactory.com/

When the browser width is resized the image automatically gets smaller but the height of the area in which it occupies stays the same.

When i try to replicate this, my image also gets smaller but the height changes?

My code so far is:

 <div id="image"><img src="cover.png" /></div>

CSS:

body {
    margin: 0;
    padding: 0;
}

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

How do i get my image to decrease/increase upon browser resize but still keep the same height using CSS like on that website?

Answer 1

I've used Perfect Full Page Background Image to accomplish this on a previous site.

You can use background-size: cover; if you only need to support modern browsers.

Answer 2

It is an old question but i want to add that if you want to resize image according to viewport size only with css; you can use viewport units "vh (viewport height) or vw (viewport width)".

.img {
width: 100vw;
height: 100vh;
}

See browser supports

Answer 3

Since you are having trouble adjusting the height you might be able to use this. http://jsfiddle.net/uf9bx/1/

img{
width: 100%;
height: 100%;
max-height: 300px;
}

I'm not sure exactly what size or location you are putting your images but maybe this will help!

Answer 4

Make it a background image and larger than 100% to get the desired effect: http://jsfiddle.net/derekstory/hVM9v/

HTML

<div id="image"></div>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#image {
    width: 100%;
    height: 500px;
    background: #000 url('http://static.ddmcdn.com/gif/dog-9.jpg') center no-repeat;
    background-size: auto 200%;
}