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

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

Я не могу заставить эту работу работать правильно, так как div с фоновым изображением требует как ширины, так и высоты для отображения фона. Я могу, очевидно, использовать "width: 100%", но что я использую для высоты? Я могу установить случайную фиксированную высоту, например, 150 пикселей, а затем увидеть верхние 150 пикселей изображения, но это не решение, так как нет фиксированной высоты. У меня была игра, и я обнаружил, что когда есть высота (проверена с 150px), я могу использовать "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 на основе ширины устройства/экрана. Общая идея заключается в том, что шаблон целевой страницы будет использоваться много раз с различными изображениями продукта, поэтому мне нужно убедиться, что я разработаю это наилучшим образом.

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

ОТВЕТЫ

Ответ 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>

Ответ 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;     
}