CODEWITHSUNDEEP
csshtml
neel
neel

Reputation: 5293

Resizing an image relative to viewport width

Hi all in my website there is a full width banner there. I made this banner in photoshop (with width:1350px and height:375px) I use the following css and html for accessing this.

#slider {
 margin-top:10px;
 height:375px;
 background:url(../Home/banner1.jpg) no-repeat center left;
}

I want to resize this banner proportionately when browser size is changed (like in the banners on the site http://www.endpolio.org/). If I put another size in 

@media handheld, only screen and (max-width: 767px) {
.....
}

it will only resize at that particular width. I want to resize my image in every pixel (both width and height). How is it possible? Please help me.

Upvotes: 2

Views: 2464

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240888

Use background-size:contain in order to preserve proportion.

Here is a shorthand, background:url('') 0px 0px / contain no-repeat;

jsFiddle demo

Updated CSS:

#slider {
    width:100%;
    height:375px;
    background:url('http://placehold.it/1350x375') 0px 0px / contain no-repeat;
}

Just modify the height of the #slider.

See MDN for information on background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Upvotes: 2

zloctb
zloctb

Reputation: 11177

background-size:contain

The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+. background-size

For ie - CSS3Pie ,more stretching the background image in IE

Upvotes: 2

Related Questions