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

9

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?

This question is tagged with html css image resize

~ Asked on 2013-06-26 15:56:40

The Best Answer is


4

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.

~ Answered on 2013-06-26 16:02:23


3

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

~ Answered on 2015-11-12 13:10:22


Most Viewed Questions: