100% -ная ширина фонового изображения с "авто" высотой

Ответ 1

Вместо использования background-image вы можете напрямую использовать img и чтобы изображение распространило всю ширину окна просмотра, используя max-width:100%;, и, пожалуйста, помните, что не применяйте никаких дополнений или полей к вашему основному контейнеру div так как они увеличивают общую ширину контейнера. Используя это правило, вы можете иметь ширину изображения, равную ширине браузера, и высота также изменится в соответствии с соотношением сторон. Спасибо.

Изменить: изменение изображения на разном размере окна

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

Ответ 2

Тим С. был намного ближе к "правильному" ответу, чем принятому в настоящее время. Если вы хотите иметь 100% -ную ширину, фоновое изображение переменной высоты, выполненное с помощью CSS, вместо использования cover (что позволит увеличить изображение с боков) или contain (что не позволяет увеличить изображение вообще), просто установите CSS так:

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

Это установит фоновое изображение на 100% ширину и позволит высоту переполнения. Теперь вы можете использовать медиа-запросы для замены этого изображения вместо того, чтобы полагаться на JavaScript.

EDIT: я понял (через 3 месяца), что вы, вероятно, не хотите, чтобы изображение переполнялось; вы, кажется, хотите, чтобы элемент контейнера изменял размер на основе его фонового изображения (чтобы сохранить его соотношение сторон), что невозможно с помощью CSS, насколько я знаю.

Скорее всего, вы скоро сможете использовать новый атрибут srcset в элементе img. Если вы хотите теперь использовать элементы img, то, вероятно, лучше всего принять текущий ответ.

Однако вы можете создать отзывчивый элемент background-image с постоянным соотношением сторон, используя только CSS. Для этого вы установите для параметра height значение 0 и установите padding-bottom в процентах от собственной ширины элемента, например:

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

Чтобы использовать разные пропорции, разделите высоту исходного изображения на свою собственную ширину и умножьте на 100, чтобы получить процентное значение. Это работает, потому что процент заполнения всегда рассчитывается на основе ширины, даже если это вертикальное дополнение.

Ответ 3

Попробуй это

html { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

Упрощенная версия

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

Ответ 4

Вы можете использовать свойство CSS background-size и установить его в cover или contain, в зависимости от ваших предпочтений. Обложка будет полностью закрывать окно, в то время как в нем будет вставлена ​​одна сторона окна, чтобы она не охватывала всю страницу (если соотношение сторон экрана не равно изображению).

Обратите внимание, что это свойство CSS3. В старых браузерах это свойство игнорируется. Кроме того, вы можете использовать javascript для изменения настроек CSS в зависимости от размера окна, но это не является предпочтительным.

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}

Ответ 5

Просто используйте двухцветное фоновое изображение:

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

Ответ 6

Добавьте css:

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

И html:

<div class="bg-mg"></div>

CSS: растягивание фонового изображения на 100% ширину и высоту экрана?

Ответ 7

Это 2017, и теперь вы можете использовать object-fit, у которого достойная поддержка. Он работает так же, как div background-size, но сам элемент и любой элемент, включая изображения.

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

Ответ 8

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}

Ответ 9

Попробуй это

html,body{
    height:100%;
    }
.hero-section {
    background: url(image.jpg) no-repeat center center; 
    background-size: cover; 
    height:100vh;     
}