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


89

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

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


Браузер может отказаться от загрузки ресурса изображения, если у него есть display: none, поэтому вы всегда можете показывать разные изображения с медиа-запросами без JS
Бен Талиадорос

Ответы:


16

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

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


Спасибо, что нашли время сделать это для меня, это очень ценно. Я просто быстро попробовал, и, похоже, он работает.
Darryl Young

2
Этот старый ответ выглядел привлекательно ... но разве мобильный браузер по-прежнему будет загружать (только не отображать) изображение, изначально заданное в HTML как src? Если да, то это не начало, поскольку цель состоит в том, чтобы сэкономить ресурсы мобильного устройства.
Тим Галлант,

1
Я считаю, что Тим Галлант прав в этом - в этом случае браузер загрузит оба изображения в качестве ресурса, а затем просто отобразит изображение с более низким разрешением. Так что, хотя это кажется привлекательным, на мобильных устройствах это на самом деле медленнее, чем загрузка только изображения с высоким разрешением, и с этой жертвой вы увидите только изображение с более низким разрешением ... худшее из обоих миров.
маленький крошечный человечек

1
Плохой ответ. Проголосовали против. Просто раздутый и старый код.
TheBlackBenzKid

Вставьте медиа-запросы, которые добавляют display: none к изображениям, которые вы не хотите показывать - большинство браузеров не загружают их
Бен Талиадорос

213

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


4
отлично, быстрый поиск в гугле привел меня сюда, проблема решена!
J King

6
Подобные ответы должны быть принятыми, они отвечают на вопрос. Конечно, дайте «лучшее решение», но также ответьте на вопрос, тогда, когда люди его найдут, они получат нужный ответ!
tim.baker

У меня это не работает, я использую Google Chrome 47.0. Может быть, потому что ответ устарел?
МэВ

Не могли бы вы уточнить, какая часть не работает? Я дал несколько возможных ответов, поэтому, если одна часть не работает, я могу уточнить детали, чтобы дать лучший и актуальный ответ.
cr0ybot

по непонятной причине установка background-size: autoрешила мою проблему на всех ориентациях устройств.
n__o

17

Попробуй это

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

16

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

4

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

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


2

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.