Есть ли способ использовать максимальную ширину и высоту для фонового изображения? - PullRequest
Новая
       20

Есть ли способ использовать максимальную ширину и высоту для фонового изображения?

32 голосов
/ 10 июня 2011

Это просто.

Перемещение моего макета на изменчивую территорию, работа с масштабируемыми изображениями.Использование тега img и установка max-width на 100% работает отлично, но я бы лучше использовал div с изображением, установленным в качестве фона.

Проблема, с которой я сталкиваюсь, заключается в том, что изображение немасштабируется до размера div, на котором он находится.Любой способ добавить разметку к фоновому коду, чтобы установить его на 100% ширину контейнера? 

#one {
    background: url('../img/blahblah.jpg') no-repeat;
    max-width: 100%;
}

Ответы [ 4 ]

27 голосов
/ 10 июня 2011

Как сказал тридцатьдот, вы можете использовать синтаксис CSS3 background-size:

Например: 

-o-background-size:35% auto;
-webkit-background-size:35% auto;
-moz-background-size:35% auto;
background-size:35% auto;

Тем не менее, как указано в тридцатке, это не работает в IE6, 7 и 8.

См. Следующие ссылки для получения дополнительной информации о background-size: http://www.w3.org/TR/css3-background/#the-background-size

13 голосов
/ 13 марта 2013

Похоже, вы пытаетесь масштабировать фоновое изображение? В приведенной ниже справочной статье есть отличная статья, в которой вы можете использовать css3 для достижения этой цели.

И если я не прочитал вопрос, то смиренно принимаю голоса вниз. (Тем не менее, приятно знать)

Пожалуйста, обратите внимание на следующий код: 

#some_div_or_body { 
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

Это будет работать во всех основных браузерах, конечно же, это нелегко для IE. Однако есть некоторые обходные пути, такие как использование фильтров Microsoft: 

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Есть несколько альтернатив, которые можно использовать с небольшим количеством душевного спокойствия, используя jQuery:

HTML 

<img src="images/bg.jpg" id="bg" alt="">

CSS 

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

JQuery: 

 $(window).load(function() {    

var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();

function resizeBg() {

    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }

}

theWindow.resize(resizeBg).trigger("resize");

});

Надеюсь, это поможет!

Источник: Идеальное фоновое изображение для полной страницы

11 голосов
/ 10 июня 2011

Вы можете сделать это с помощью background-size: 

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
}

Существует множество значений, отличных от cover, для которых вы можете установить background-size, чтобы узнать, какое из них вам подходит: https://developer.mozilla.org/en/CSS/background-size

Спецификация: https://www.w3.org/TR/css-backgrounds-3/#the-background-size

Работает во всех современных браузерах: http://caniuse.com/#feat=background-img-opts

4 голосов
/ 05 марта 2017

К сожалению, нет min (или max) - размер фона в CSS вы можете использовать только background-size. Однако, если вы ищете адаптивное фоновое изображение, вы можете использовать единицы Vmin и Vmax для свойства background-size, чтобы получить нечто подобное.

пример: 

#one {
    background:url('../img/blahblah.jpg') no-repeat;
    background-size:10vmin 100%;
}

, который установит высоту в 10% от любого меньшего окна просмотра, вертикального или горизонтального, и установит ширину в 100%.

Подробнее о единицах css читайте здесь: https://www.w3schools.com/cssref/css_units.asp

...