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

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?

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

The website you linked doesn't changes the image's width but it actually cuts it off. For that it needs to be set as a background-image.

For more info about background-image look it at http://www.w3schools.com/cssref/pr_background-image.asp

Usage:

#divID {
    background-image:url(image_url);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

You should learn about the Media queries for CSS. The site you referring to is using the same. The site is basically using the different CSS everytime the browser window size is changining. Here's the link for samples

http://css-tricks.com/css-media-queries/

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%;
}

changing the width of the image will automatically change the height...

how many pictures do you want to have this functionality? If it's a lot and they all have DIFFERENT Heights you should probably just let the height change as well.

Lets say you have 5 images that have height 400px , in your html give those five tags the class of fixed

.fixed { width: 100%; height: 500px !important }

This should let the width change but keep the height the same.

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!