Фоновое изображение шириной 100% с высотой «авто» (2015 г.) — кроссбраузерность

Спрашивая это как ответы в этой ветке 2013 года (100-width-background -image-with-an-auto-height) больше не работает.

  • Мне нужно сделать отзывчивое фоновое изображение со 100% шириной и автоматической высотой.
  • Я хотел бы использовать разные изображения в зависимости от размера экрана, используя медиа-запросы, а не Javascript.
  • Было бы хорошо, если бы он работал в разных браузерах (хотя бы Chrome/Firefox)

Используя следующий код:

<img src="image.jpg" style="width: 100%;">

Изображение отображается правильно, ширина 100% и автоматическая высота (см. здесь: JSFIDDLE1), но я не могу заменить его источник при изменении размера экрана, если я не использую Javascript.

Поэтому я работаю над использованием фонового изображения в DIV.

<div class="imageContainer1"></div>

и, используя следующий CSS, все работает нормально (по крайней мере, в Chrome/Safari):

.imageContainer1 {
    content:url("image.jpg");
}

См. здесь JSFIDDLE2

но .. похоже, это не работает в Firefox! :-( так как свойство "content" кажется несовместимым с firefox.

Итак.... Я хотел бы использовать свойство «фоновое изображение» и найти решение, совместимое со всеми браузерами, но я борюсь с установкой ширины 100% и автоматической высоты.

Этот

<div class="imageContainer2"></div>

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

Ничего не показывает, но если поставить, например:

height: 500px;

вы сможете увидеть часть изображения.

Это JSFiddle: JSFiddle3

Я пытался использовать:

background-size: cover/contain

Но это не то, что я пытаюсь сделать, поскольку «обложка» позволит изображению расширяться по бокам, а «содержать» вообще не позволяет изображению расширяться).

Есть решение этого кошмара?


html css background background-image responsiveness
person MeV    schedule 08.12.2015    source источник
comment
Я хотел бы отображать разные изображения в зависимости от размера экрана с помощью медиа-запросов – поэтому использовать несколько элементов img и показывать/скрывать их в зависимости от разрешения экрана?   -  person Vucko    schedule 08.12.2015
comment
@ Вуко хм. Мне интересно, загрузит ли это все изображения, даже если они скрыты. т.е. Мобильные пользователи будут загружать изображения рабочего стола в фоновом режиме   -  person MeV    schedule 08.12.2015
comment
Да, это правда, все изображения будут загружены.   -  person Vucko    schedule 08.12.2015

Ответы (1)


arrow_upward
1
arrow_downward

если вы не хотите часто использовать media queries для изменения background-image, а что касается вашей скрипки, мне кажется, что вы пытаетесь максимально упростить код, используя тег img, и как вы упомянули:

Было бы хорошо, если бы он работал в разных браузерах (хотя бы Chrome/Firefox)

Итак... вы можете использовать атрибут srcset в своем img, например:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="image">

набор_источников

Список из одной или нескольких строк, разделенных запятыми, указывающих набор возможных источников изображений для использования пользовательским агентом. Каждая строка состоит из:

  1. URL-адрес изображения,
  2. optionally, whitespace followed by one of:
    • a width descriptor, that is a positive integer directly followed by 'w'. The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density.
    • дескриптор плотности пикселей, который представляет собой положительное число с плавающей запятой, за которым непосредственно следует «x».

Если дескриптор не указан, источнику назначается дескриптор по умолчанию: 1x.

Недопустимо смешивать дескрипторы ширины и дескрипторы плотности пикселей в одном и том же атрибуте srcset. Дублирующиеся дескрипторы (например, два источника в одном и том же srcset, бот которых описан как «2x») также недействительны.

Пользовательским агентам предоставляется право выбора любого из доступных источников. Это дает им значительную свободу действий, чтобы адаптировать свой выбор на основе таких вещей, как пользовательские предпочтения или условия пропускной способности.

person dippas    schedule 08.12.2015
comment
OP запрашивает как минимум Chrome/Firefox, который полностью поддерживается :) - person dippas; 08.12.2015
comment
Спасибо @dippas, это интересно, и мне нужно поиграть с этим, потому что я никогда не использовал его раньше и не смогу использовать его с div. - person MeV; 08.12.2015
comment
Я играл с ним, в частности, я использовал тег «picture» вместе с srcset, кажется, он отлично работает в Chrome и Firefox. К сожалению, кажется, что это не работает в Safari, и из-за этого все устройства Apple будут отключены ... очень плохо :-( но все равно спасибо, ваше решение хорошо для того, что я просил. - person MeV; 11.12.2015