Как масштабировать фоновое изображение без потери пропорций

Я хочу создать фоновое изображение веб-страницы, которое заполняет весь фон, не искажая изображение и не изменяя его пропорции.

Вы можете увидеть большую реализацию этого на страницах LaunchRock и, например, на своей домашней странице.

Я видел qaru.site/questions/12535/... однако, если вы играете с тем, что производит, вы увидите, что фоновое изображение имеет высоту 100% и ширину 100%, что означает, что исходные пропорции фотографии не поддерживаются и изображение растягивается.

Обратите внимание в примере LaunchRock, что при изменении размера окна браузера изображение увеличивается пропорционально и всегда заполняет все окно (независимо от того, какое окно размера или фоновое изображение они используют).

Если окно браузера недостаточно велико, оно обрезает стороны фонового изображения (удерживая изображение в центре и обрезая левую и правую стороны), и если окно недостаточно высоко, оно обрезает нижнюю часть фонового изображения.

Независимо от размера окна браузера, соотношение высоты и ширины изображения сохраняется и заполняется весь фон.

Я предполагаю, что это невозможно сделать с помощью чистого CSS, может понадобиться какой-то JavaScript. Есть идеи?

благодаря

0
26 июн. '12 в 10:40
источник поделиться
4 ответа

Это делается только с помощью CSS:

body {    
    background: black url(/images/back.jpg) no-repeat top center fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

Вещи, которые делают это возможным:

  • CSS-свойство background-size установленное для cover и его версии с префиксом поставщика
  • используя background-image которое исчезает на черном по бокам
  • положение, установленное в top center
  • используя fixed свойство
+2
26 июн. '12 в 10:43
источник

на странице LaunchRock, которую вы использовали в качестве примера, используется свойство CCS3: background-size. Это свойство, которое выполняет "магию" масштаба.

Подробнее о background-size: http://www.css3.info/preview/background-size/

  • Не забудьте увидеть поддержку браузера для этого свойства.

Весьма вероятно, что это можно сделать с помощью javascript и даже с использованием CSS2. Извините, сейчас у меня нет примера.

+1
26 июн. '12 в 11:10
источник

Пример: http://jsfiddle.net/rPhLa/

Вы должны установить:

 html,body{ height:100%; width:100%; }

Поэтому они занимают весь экран, а затем на фоне:

body { background-image: url(http://launchrock.com/images/back.jpg); background-repeat: no-repeat; background-position:center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }​
+1
26 июн. '12 в 10:45
источник

Если вы не против использования jQuery, вы можете попробовать http://srobbin.com/jquery-plugins/backstretch/.

+1
26 июн. '12 в 10:44
источник

Посмотрите другие вопросы по меткам или Задайте вопрос