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

Как изменить размер фоновой картинки через CSS3

Оригинал: sitepoint.com/css3-background-size-property

Перевод: Влад Мержевич

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Есть несколько способов определения размеров — взгляните на демонстрационную страницу background-size.

Абсолютное изменение размера

Могут применяться единицы измерения.

background-size: ширина высота;

По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

background-size: 100px 200px;

Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:

background-size: 100px;
  /* аналогично */
background-size: 100px auto;

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

background-size: 50% auto;

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

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

Масштабирование до максимального размера

Свойство background-size также понимает ключевое слово contain. Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

background-size: contain;

Заполнение фоном

Свойство background-size также понимает ключевое слово cover. Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.

background-size: cover;

Масштабирование нескольких фонов

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

background:
  url("sheep.png") 60% 90% no-repeat,
  url("sheep.png") 40% 50% no-repeat,
  url("sheep.png") 10% 20% no-repeat #393;
  background-size: 240px 210px, auto, 150px;

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

IE8 и ниже не поддерживают это свойство. Вы можете использовать фильтр IE для эмуляции значений content и cover, но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.

Просмотр демонстрационной страницы с background-size.

CSS3фон

CSS по теме

• background-size

Статьи по теме

• Как изменить размер фоновой картинки через CSS3
• Как растянуть фон на всю ширину окна?
• Масштабирование фона

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

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

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

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

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

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

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

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-атрибутов ширины и высоты непосредственно в разметке.

Демо

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

Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу <img> значение inline-block для свойства display, т. е. сделать его встроенным.
Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.

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

Демо

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

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

HTML:

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

/* Для небольших устройств (смартфоны) */
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%.

CSS:

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

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

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

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

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

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

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

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

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

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

Однако мы можем использовать два атрибута — 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.

Старые браузеры, не поддерживающие эти функции, просто игнорируют их. Вместо этого эти браузеры загрузят изображение, указанное в 9Атрибут 0007 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, а затем при желании динамически изменить исходное изображение на меньшее. К тому времени исходное изображение уже будет загружено, и вы также загрузите маленькое изображение, что еще хуже с точки зрения адаптивного изображения.

Смело используйте современные форматы изображений

Новые форматы изображений, такие как WebP и AVIF, могут поддерживать небольшой размер файла и одновременно высокое качество. Эти форматы теперь имеют относительно широкую поддержку браузеров, но небольшую «историческую глубину».

позволяет нам продолжать работать со старыми браузерами. Вы можете указать типы MIME внутри атрибутов типа , чтобы браузер мог немедленно отклонить неподдерживаемые типы файлов:

 
  
  
  <изображение
    источник = "пирамида.png"
    alt="правильная пирамида, построенная из четырех равносторонних треугольников" />

 

• До , а не , используйте атрибут media , если вам также не требуется художественное оформление.
• В элементе можно ссылаться только на изображения типа, объявленного в type .
• При необходимости используйте списки, разделенные запятыми, с srcset и размерами .

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

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

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

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