CSS или jQuery масштабируемое фоновое изображение без пробелов внизу, когда высота img меньше высоты окна - PullRequest
Новая
       14

CSS или jQuery масштабируемое фоновое изображение без пробелов внизу, когда высота img меньше высоты окна

5 голосов
/ 22 февраля 2011

Олди, но хорошо, я знаю.Этот вопрос задают так много раз, и все же у меня нет однозначного ответа.Масштабируемое фоновое изображение, желательно только CSS, готовое использовать jQuery для поддержки, если это необходимо.Проблема, с которой я столкнулся (например, с CSS3 background-image) - это пустое пространство под изображением, когда его высота меньше высоты окон браузера.(пример: http://css -tricks.com / examples / ImageToBackgroundImage / )

Вот что я хотел бы выполнить:

  • Сохранение пропорций
  • Обрезать высоту и ширину изображения, если окно браузера меньше размера изображения
  • Изображение центрировано на странице, поэтому обрезка не компенсирует поток страницы

ЗдесьВот несколько примеров, иллюстрирующих эти цели (хотя я думаю, что это можно сделать лучше):

Спасибо,Спасибо, спасибо.

Ответы [ 5 ]

1 голос
/ 23 февраля 2011

Рекомендовал Supersize от друга - это было именно то, что я искал! Использовал базовую функцию вместо версии слайд-шоу. http://www.buildinternet.com/project/supersized/

1 голос
/ 22 февраля 2011

CSS: 

#wallpaper {position:absolute; width:100%; height:100%; top:0; left:0; z-index:0}
#wallpaper img {height:100%; width:100%; margin:0 auto;}

HTML: 

<div id="wallpaper"><img src="bg.jpg"></div>
1 голос
/ 22 февраля 2011

Вы можете использовать что-то вроде: 

selector {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
}

, но оно несовместимо с браузером.

.
Альтернативные решения заставят вас использовать HTML.

Примеры:

0 голосов
/ 22 февраля 2011

Вы видели https://github.com/weightshift/The-Personal-Page?

Используется плагин backstretch jQuery, который отлично справляется с работой.

0 голосов
/ 22 февраля 2011

Вот, пожалуйста. Использование jQuery. Тег IMG устанавливается как фоновое изображение с помощью position:absolute; z-indez:0;. При изменении размера окна изображение будет соответственно изменяться. Совместимость с различными браузерами. 

$(window).resize(function(){
    var bgwidth = $(window).width(),
    bgheight= $(window).height();
    $('img').attr({width:bgwidth, height:bgheight});
})

Проверьте рабочий пример на http://jsfiddle.net/LBvjR/

...