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

Тим С. был гораздо ближе к" правильному " ответу, чем в настоящее время принятый. Если вы хотите иметь 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 элементы теперь, в настоящее время принятый ответ, вероятно, лучше всего.

тем не менее, вы можете создать отзывчивый элемент фонового изображения с постоянным соотношением сторон, используя исключительно 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, чтобы получить процентное значение. Это работает, потому что процент заполнения всегда рассчитывается на основе ширины, даже если это вертикальная прокладка.

попробуй такое

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;
}

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

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

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

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

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

добавить 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% ширины и высоты экрана?

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

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

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