Адаптивный фон css: Полностью адаптивный фон с использованием CSS

Адаптивные изображения с помощью CSS – Dobrovoimaster

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

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

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

img {
  width: 100%;
  height: auto;
}

Базовые значения адаптивного изображения

Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными.
Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px;, в этом блоке нам необходимо вывести адаптивное изображение.
Для этого элементу <img> внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.

HTML:

<div>
  <img src="image01.jpg" />
</div>

CSS:

div.container {
  width: 96%;
  max-width: 960px;
  margin: 0 auto; /* центрируем основной контейнер */
}
img {
  width: 100%; /* ширина картинки */
  height: auto; /* высота картинки */
}

Обратите внимание, что <img> элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.

Демо

Адаптивные изображения в колонках

Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство

1. Макет изображений в две колонки
Для двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.

HTML:

<div>
  <img src="image01.jpg" />
  <img src="image02.jpg" />
</div>

CSS:

img {
  width: 48%;
  display: inline-block;
}

2. Три колонки изображений

С трёх-колоночным макетом концепция та же, необходимо распределить ширину базового контейнера на три картинки, для этого достаточно установить значения ширины изображений около одной трети ширины контейнера: 32%.

HTML:

<div>
  <img src="image01. jpg" />
  <img src="image02.jpg" />
  <img src="image03.jpg" />
</div>

CSS:

img {
  width: 32%;
  display: inline-block;
}

Демо

Условная расстановка адаптивных изображений

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

HTML:

<div>
  <img src="image01.jpg" />
  <img src="image02.jpg" />
  <img src="image03. jpg" />
  <img src="image04.jpg" />
</div>

CSS:

/* Для небольших устройств (смартфоны) */
img {
  max-width: 100%;
  display: inline-block;
}
/* Для средних устройств (планшеты) */
@media (min-width: 420px) {
  img {
    max-width: 48%;
  }
}
/* Для больших устройств (ноуты, пк) */
@media (min-width: 760px) {
  img {
    max-width: 24%;
  }
}

Всё довольно просто, неправда ли? Идея с медиа-запросами отличная, уже довольно давно и широко используемая. Показанные в примере параметры, хорошо работают именно с данным макетом, как поведут себя в других конструкциях, стоит тщательно проверять, так что…

Демо

Адаптивное изображение на всю ширину экрана

Для того, чтобы сделать широко-форматные адаптивные изображения, которые заполняют 100% размера окна просмотра, необходимо просто удалить свойство максимальной ширины контейнера max-width (значение в 960px) и установить ему ширину width в 100%. Ширина изображения, так же выставляется в значение 100%.

CSS:

.container {
  width: 100%;
}
img {
  width: 100%;
}

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

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

ДемоИсходники

Источник: sixrevisions
Надеюсь буржуинский автор не будет на меня в обиде за столь вольный перевод)))

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Настройка адаптивного фона в WordPress (UPD: 02.02.18)

Всем хорош WordPress, но некоторые вещи на нем сделать несколько сложней, чем на самописном сайте или чем-то подобном. Ну, или по крайней мере, они не столь очевидны.

Пост о том, как сделать фон «резиновым» (растягивающимся по размеру экрана).

Проблема.

Столкнулся с проблемой с фоном. Текущий фон — планета Земля, имеет разрешение моего монитора: 1366×768, и если зайти на сайт с большего разрешения — фон будет либо повторяться (если включена опция «Замостить»), либо фон просто закончится (картинка будет не на весь экран, а все остальное будет залито цветом фона). И всё, всего два варианта: либо повтор (что смотрится некрасиво, этакая куча планеток, да еще и обрубленных в моем случае), либо цвет фона вокруг этого обрубка планетки (черный смотрится еще более  менее). И да, планета обрублена потому, что если ставить целую — из-за колонки контента ее будет вовсе не видно. А не потому, что я или Лисий Департамент любят рубить планетки.

Решение.

Решение сперва было довольно извращенным, хотя и действенным. Найти в коде формирование стиля для body.custom-background, именно там формируется отображение основного фона, и поправить его, внеся свойство background-size:cover (именно оно растягивает фон по размеру экрана). Данная строчка кода была найдена в файле /wordpress/wp-includes/theme.php в функции _custom_background_cb, к переменной $style после ее окончательного формирования можно добавить необходимое свойство:

$style.="background-size:cover;";

И подобное решение работает, к тому же, таким образом можно дописать в стиль фона что угодно (например, задать две картинки для фона и т.п., об этом, возможно, позже напишу) . Одно НО: после обновления или переустановки WordPress — файл примет исходное значение и придется делать всё сначала. Внести изменения недолго, но всё же уже бубнопляски немного. Для избежания таких проблем и были придуманы плагины для WordPress. И такой плагин был найден, называется он Add background-size to Customizer, скачать можно, найдя его по названию (в админке WP) или с официального сайта. Плагин добавляет на страницу редактирования фонового изображения параметры для настройки размера. Выбираем заветное background-size:cover и радуемся появившейся адаптивности фона нашего WordPress сайта.

Появившийся параметр в настройке фона сайта

Послесловие.

Странно, что в WordPress из коробки не идет подобной функциональности (возможно, оно и есть в какой-нибудь из тем, но это не то + плагин универсальней), штука-то необходимая.Данный плагин, однако, не позволяет, к примеру, поставить два фоновых изображения или же настроить иные свойства фона, но пока что мне это и не нужно.P.S. Надеюсь, сее когда-нибудь кому-нибудь да поможет, ибо я не смог нагуглить (да, возможно, гуглер из меня никакой) данное решение. В код полез от безысходности, а плагин нашел уже потом, чисто перебирая их все, включающие в название слова «bacground» и «custom».

В последних версиях  (в 4.9.2 точно) WordPress таки появился нужный функционал «из коробки». Кликайте «Настроить» на админ панели сайта, переходите в «Фоновое изображение», выбирайте «Набор предустановок: Заполнить экран» и применяйте изменения.

Все вышеперечисленные изменения кода или плагин рекомендуется удалить (плагин уже давно не поддерживается и потенциально может содержать в себе дыры безопасности).

Настройка адаптивного фона средствами WordPress

Метки: Add background-size to Cusomizer, background-size, background-size:cover, WordPress, адаптивный фон WordPress, дизайн, исходный код, код wordpress, плагины wordpress, резиновый фон, сайт. Закладка Постоянная ссылка.

Как установить адаптивное полное фоновое изображение с помощью CSS?

Адаптивные изображения — Изучайте веб-разработку

Итак, какую проблему мы хотим решить с помощью переключения разрешения? Мы хотим отображать идентичный контент изображения, только большего или меньшего размера в зависимости от устройства — это ситуация, которая у нас есть со вторым изображением контента в нашем примере. Стандарт 9Элемент 0007 традиционно позволяет указать браузеру только один исходный файл:

  jpg" alt="Эльва, одетая как фея" />
 

Однако мы можем использовать два атрибута — srcset и размеры — чтобы предоставить несколько дополнительных исходных изображений вместе с подсказками, которые помогут браузеру выбрать правильное. Вы можете увидеть пример этого в нашем примере responsive.html на GitHub (см. также исходный код):

Атрибуты srcset и размеры выглядят сложными, но их несложно понять, если отформатировать их, как показано выше, с разными частями значения атрибута в каждой строке. Каждое значение содержит список, разделенный запятыми, и каждая часть этих списков состоит из трех частей. Давайте пробежимся по содержимому каждого из них:

srcset определяет набор изображений, из которых браузер может выбирать, и размер каждого изображения. Каждый набор информации об изображении отделяется от предыдущего запятой. Для каждого пишем:

1. Имя файла изображения ( elva-fairy-480w.jpg )
2. Пространство
3. Внутренняя ширина изображения в пикселях ( 480w ) — обратите внимание, что здесь используется единица измерения w , а не пикселей , как можно было бы ожидать. Внутренний размер изображения — это его реальный размер, который можно узнать, просмотрев файл изображения на вашем компьютере (например, на Mac вы можете выбрать изображение в Finder и нажать Команда + я чтобы открыть информационный экран).

размеры определяет набор медиа-условий (например, ширину экрана) и указывает, какой размер изображения лучше всего выбрать, когда выполняются определенные медиа-условия — это подсказки, о которых мы говорили ранее. В этом случае перед каждой запятой мы пишем:

1. A media condition ( (max-width:600px) ) — вы узнаете больше об этом в теме CSS, а пока просто скажем, что состояние мультимедиа описывает возможное состояние, в котором может находиться экран. В этом случае мы говорим «когда ширина области просмотра составляет 600 пикселей или меньше».
2. Пространство
3. ширина слота изображение будет заполнено, когда условие мультимедиа истинно ( 480px )

Примечание: Для ширины слота вместо абсолютной ширины (например, 480px ) можно указать ширину относительно окна просмотра (например, 50vw ) — но не в процентах. Возможно, вы заметили, что ширина последнего слота не имеет условия носителя (это значение по умолчанию, которое выбирается, когда ни одно из условий носителя не выполняется). Браузер игнорирует все после первого условия совпадения, поэтому будьте осторожны с порядком условий мультимедиа.

Таким образом, с этими атрибутами браузер будет:

1. Смотреть на ширину своего устройства.
2. Выясните, какое условие носителя в списке размеров является верным первым.
3. Посмотрите на размер слота, указанный для этого медиа-запроса.
4. Загрузите изображение, указанное в списке srcset , которое имеет тот же размер, что и слот, или, если его нет, первое изображение, которое больше выбранного размера слота.

Вот и все! На этом этапе, если поддерживающий браузер с шириной области просмотра 480 пикселей загружает страницу, (max-width: 600px) условие мультимедиа будет истинным, поэтому браузер выбирает слот 480px . elva-fairy-480w.jpg будет загружен, так как его собственная ширина ( 480w ) ближе всего к размеру слота. Изображение размером 800 пикселей занимает на диске 128 КБ, а версия с разрешением 480 пикселей — всего 63 КБ, что позволяет сэкономить 65 КБ. А теперь представьте, если бы это была страница, на которой было бы много картинок. Использование этой техники может значительно сэкономить мобильным пользователям полосу пропускания.

Примечание: Если при тестировании с настольным браузером браузер не загружает более узкие изображения, когда у вас установлена ​​самая узкая ширина окна, посмотрите, какое окно просмотра (вы можете примерно заходим в консоль JavaScript браузера и вводим document.querySelector('html').clientWidth ). У разных браузеров есть минимальные размеры, до которых они позволяют уменьшить ширину окна, и они могут быть шире, чем вы думаете. При тестировании с помощью мобильного браузера вы можете использовать такие инструменты, как страница Firefox about:debugging , чтобы проверить страницу, загруженную на мобильный телефон, с помощью инструментов разработчика для настольных компьютеров.

Чтобы увидеть, какие изображения были загружены, вы можете использовать вкладку «Сетевой монитор» Firefox DevTools или панель «Сеть» Chrome DevTools. Для Chrome вы также можете отключить кеш, чтобы он не выбирал уже загруженные изображения.

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

Примечание: В приведенного выше примера вы найдете строку : это заставляет мобильные браузеры использовать реальную ширину области просмотра для загрузки веб-страниц (некоторые мобильные браузеры лгут о ширине области просмотра и вместо этого загружают страницы с большей шириной области просмотра, а затем уменьшают загруженную страницу, что не очень полезно для адаптивных изображений или дизайна).

Переключение разрешения: одинаковый размер, разные разрешения

Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение на экране с одним и тем же реальным размером, вы можете разрешить браузеру выбирать изображение с подходящим разрешением, используя srcset с x-дескрипторами и без размеры — несколько проще синтаксис! Вы можете найти пример того, как это выглядит в srcset-resolutions. html (см. также исходный код):

В этом примере к изображению применяется следующий CSS, чтобы оно имело ширину 320 пикселей на экране (также называемую пикселями CSS):

 изображение {
  ширина: 320 пикселей;
}
 

В этом случае размеры не нужны — браузер определяет, какое разрешение имеет дисплей, на котором он отображается, и выдает наиболее подходящее изображение, указанное в srcset . Таким образом, если устройство, обращающееся к странице, имеет дисплей со стандартным/низким разрешением, где один пиксель устройства представляет каждый пиксель CSS, elva-fairy-320w.jpg Будет загружено изображение (подразумевается 1x, поэтому включать его не нужно). -fairy-640w.jpg Будет загружено изображений. Размер изображения 640 пикселей составляет 93 КБ, а размер изображения 320 пикселей — всего 39 КБ.

Художественное направление

Напомним, что проблема художественного направления связана с желанием изменить отображаемое изображение, чтобы оно соответствовало различным размерам отображаемого изображения. Например, веб-страница содержит большой пейзажный снимок с человеком в центре при просмотре в браузере настольного компьютера. При просмотре в мобильном браузере это же изображение уменьшается, в результате чего человек на изображении становится очень маленьким и его трудно увидеть. Вероятно, было бы лучше показать портретное изображение меньшего размера на мобильном телефоне, которое увеличивает изображение человека. 9Элемент 0007 позволяет реализовать именно такое решение.

Возвращаясь к нашему исходному примеру not-responsive.html, у нас есть изображение, которое крайне нуждается в художественном оформлении:

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

• Элементы включают атрибут media , который содержит условие мультимедиа — как и в первом примере srcset , эти условия являются тестами, которые определяют, какое изображение будет показано — первое, которое возвращает true, будет отображаться . В этом случае, если ширина области просмотра составляет 799 пикселей или меньше, будет отображаться изображение первого элемента . Если ширина области просмотра составляет 800 пикселей или больше, это будет вторая.
• Атрибуты srcset содержат путь к отображаемому изображению. Так же, как мы видели с выше, может принимать атрибут srcset с несколькими ссылками на изображения, а также атрибут размеров . Таким образом, вы можете предлагать несколько изображений с помощью элемента , а также предлагать несколько разрешений каждого из них. На самом деле, вы, вероятно, не захотите делать такие вещи очень часто.
• Во всех случаях необходимо указать элемент с src и alt непосредственно перед , иначе изображения не появятся. Это обеспечивает случай по умолчанию, который будет применяться, когда ни одно из условий мультимедиа не возвращает значение true (вы можете фактически удалить второй элемент в этом примере), и запасной вариант для браузеров, которые не поддерживают . элемент.

Этот код позволяет отображать подходящее изображение как на широкоэкранных, так и на узких экранах, как показано ниже:

Примечание: Атрибут media следует использовать только в сценариях художественного оформления; когда вы используете media , не предлагайте условия мультимедиа в атрибуте размеры .

Почему мы не можем сделать это с помощью CSS или JavaScript?

Когда браузер начинает загружать страницу, он начинает загружать (предварительно загружать) любые изображения до того, как основной парсер начнет загрузку и интерпретацию CSS и JavaScript страницы. Этот механизм полезен в целом для сокращения времени загрузки страницы, но бесполезен для адаптивных изображений — отсюда и необходимость реализации таких решений, как 9.0007 исходный набор . Например, вы не можете загрузить элемент , затем определить ширину области просмотра с помощью JavaScript, а затем при желании динамически изменить исходное изображение на меньшее. К тому времени исходное изображение уже будет загружено, и вы также загрузите маленькое изображение, что еще хуже с точки зрения адаптивного изображения.

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

1. Напишите простой HTML-код, содержащий ваш код (используйте not-responsive.html в качестве отправной точки, если хотите).
2. Найдите красивое широкоэкранное пейзажное изображение с какой-нибудь деталью, содержащейся где-нибудь. Создайте его веб-версию с помощью графического редактора, затем обрежьте его, чтобы показать меньшую часть, которая увеличивает детали, и создайте второе изображение (для этого подойдет ширина около 480 пикселей).
3. Используйте элемент для реализации переключателя изображений в художественном направлении!
4. Создайте несколько файлов изображений разного размера, каждый из которых содержит одно и то же изображение.
5. Используйте srcset / размеры , чтобы создать пример переключателя разрешения, либо для показа изображения одного размера с разными разрешениями в зависимости от разрешения устройства, либо для показа изображений разных размеров в зависимости от ширины области просмотра.

Вот и все для адаптивных изображений — надеемся, вам понравилось играть с этими новыми методами. Напомню, что мы здесь обсуждали две отдельные проблемы:

• Художественное направление : Проблема, из-за которой вы хотите использовать обрезанные изображения для разных макетов — например, альбомное изображение, показывающее полную сцену для макета для настольного компьютера, и портретное изображение, показывающее увеличенный основной объект для мобильного макета. Вы можете решить эту проблему, используя элемент .
• Переключение разрешения : Проблема, связанная с тем, что вы хотите показывать файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на дисплеях настольных компьютеров, — и показывать изображения с другим разрешением на экранах с высокой/низкой плотностью. Вы можете решить эту проблему, используя векторную графику (изображения SVG) и srcset с размерами атрибутов.

На этом весь модуль мультимедиа и встраивания заканчивается! Единственное, что нужно сделать сейчас, прежде чем двигаться дальше, — это попробовать нашу оценку мультимедиа и встраивания и посмотреть, как у вас идут дела. Веселиться!

• Отличное введение Джейсона Григсби в адаптивные изображения
• Адаптивные изображения: если вы просто меняете разрешение, используйте srcset — содержит дополнительные объяснения того, как браузер определяет, какое изображение использовать
• <картинка>
• <источник>

• Предыдущий
• Обзор: мультимедиа и встраивание
• Следующий

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Просмотрите исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.