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

Так просто.

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

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

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

Ответ 1

Вы можете сделать это с 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

Ответ 2

Как указано в тридцать, вы можете использовать синтаксис 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

Ответ 3

Похоже, вы пытаетесь масштабировать фоновое изображение? Там хорошая статья в справочной таблице, где вы можете использовать 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");

});

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

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

Ответ 4

К сожалению, там нет 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

Ответ 5

.container {
  position: fixed;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
}

img {
  max-width: 100%;
  max-height: 100%;
}

/////////

<div class="container">
  <img>
</div>