Изменение размера изображения относительно ширины окна просмотра

Question

Привет всем на моем сайте есть баннер с полной шириной. Я сделал этот баннер в Photoshop (с шириной: 1350px и height: 375px) Я использую следующие css и html для доступа к этому.

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

Я хочу, чтобы изменить этот баннер пропорционально, когда размер окна браузера изменяется (например, в баннерах на сайте http://www.endpolio.org/). Если я поставлю другой размер в

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

он будет изменять размер только на той определенной ширине. Я хочу изменить размер изображения в каждом пикселе (как по ширине, так и по высоте). Как это возможно? Пожалуйста, помогите мне.

Answer 1

Используйте background-size:contain, чтобы сохранить пропорции.

Вот стенограмма, background:url('') 0px 0px/contain no-repeat;

jsFiddle demo

Обновленный CSS:

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

Просто измените высоту #slider.

См MDN для получения информации о background-sizehttps://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

background-size:contain 

Фоновое размер имущества поддерживается в IE9 +, Firefox 4+, Opera, Chrome и Safari 5+. background-size

Для т.е. - CSS3Pie больше stretching the background image in IE