Фоновое изображение 100% ширины с автоматической высотой

В настоящее время я работаю над мобильной целевой страницей для компании. Это действительно базовый макет, но под заголовком есть изображение продукта, которое всегда будет иметь 100% ширину (дизайн показывает, что оно всегда идет от края к краю). Очевидно, что в зависимости от ширины экрана высота изображения будет соответственно изменяться. Первоначально я сделал это с img (с шириной CSS 100%), и он отлично работал, но я понял, что хотел бы использовать медиа-запросы для обслуживания разных изображений на основе разных разрешений - скажем, маленький, средний и например, большая версия того же изображения. Я знаю, что вы не можете изменить img src с помощью CSS, поэтому я решил, что должен использовать фон CSS для изображения, а не тег img в HTML.

Я не могу заставить это работать должным образом, поскольку div с фоновым изображением требует как ширины, так и высоты, чтобы показать фон. Очевидно, я могу использовать ширину: 100%, но что мне использовать для высоты? Я могу задать произвольную фиксированную высоту, например 150 пикселей, и тогда я смогу увидеть верхние 150 пикселей изображения, но это не решение, поскольку фиксированной высоты нет. Я поигрался и обнаружил, что когда есть высота (проверено с 150 пикселей), я могу использовать background-size: 100%, чтобы правильно разместить изображение в div. Я могу использовать для этого проекта более свежий CSS3, поскольку он предназначен исключительно для мобильных устройств.

Ниже я добавил примерный пример. Прошу прощения за встроенные стили, но я хотел бы привести простой пример, чтобы попытаться прояснить свой вопрос.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

Может быть, мне нужно указать высоту контейнера div в процентах от всей страницы, или я смотрю на это совершенно неправильно?

Кроме того, как вы думаете, CSS-фоны - лучший способ сделать это? Возможно, есть метод, который обслуживает разные теги img в зависимости от ширины устройства / экрана. Общая идея заключается в том, что шаблон целевой страницы будет многократно использоваться с разными изображениями продуктов, поэтому мне нужно убедиться, что я разработал его наилучшим образом.

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

Вместо использования 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>

Таким образом вы меняете изображение в разных размерах браузера.

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

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

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

РЕДАКТИРОВАТЬ: Я только что понял (3 месяца спустя), что вы, вероятно, не хотите, чтобы изображение переполнялось; вам кажется, что вы хотите, чтобы размер элемента контейнера изменялся на основе его фонового изображения (чтобы сохранить его соотношение сторон), что, насколько мне известно, невозможно с помощью CSS.

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

Однако вы можете создать адаптивный элемент фонового изображения с постоянным соотношением сторон, используя только CSS. Для этого вы устанавливаете height0 и устанавливаете 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;
}

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

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

Вы можете использовать свойство 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 */
}

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

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