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?
width:100%;
height should be the fixed height too, in pixels (e.g.height:100px;
)