Ned Ned - 1 year ago 121
CSS Question

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:

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>


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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download