Создание отзывчивых изображений (Responsive Images) с помощью CSS
Существует много техник по созданию отзывчивых изображений. Они отличаются по сложности и браузерной поддержке.
Пример сложного создания отзывчивых изображений — это использование атрибута srcset, который требует нескольких изображений и использует больше разметки, а также он опирается на новый HTML атрибут, который не имеет хорошей поддержки вне современных браузеров.
Но в данной статье мы разберем метод, который, наоборот, является простым и опирается лишь на CSS свойства width и height. А это означает, что данный метод будет работать во всех браузерах и на всех устройствах. Однако, для этого потребуется, чтобы дизайн веб-макета был «резиновым»/отзывчивым.
В данной обучающей статье вы увидите несколько вариантов реализации отзывчивых изображений, но основной смысл будет одним и тем же: используя CSS, задавать изображениям выраженное в процентах (или с использованием любых относительных единиц измерения, например, ems) значение для свойства width, а для свойства height указывать значение auto.
img {
width: 100%;
height: auto;
}
Простое отзывчивое изображение
Давайте начнем с базового примера. У нас есть элемент div, который выступает в качестве контейнера для элемента img.
HTML
<div class="container"> <img src="image01.jpg" width="960" height="640" /> </div>
Значение свойства width у контейнера выставлено на 96%, т.е. у него присутствуют левые и правые внешние отступы (margin). Также ему задано свойство max-width в значении 960px, чтобы макет не был слишком широким на больших экранах. Элемент img, внутри контейнера, имеет свойство width со значением 100%, чтобы его ширина всегда равнялась ширине контейнера, независимо от размеров области просмотра (viewport). Таким образом изображение становится отзывчивым. Свойство height имеет значение auto, чтобы изображение масштабировалось пропорционально.
CSS
div.container {
width: 96%;
max-width: 960px;
margin: 0 auto; /* чтобы отцентрировать контейнер */
}
img {
width: 100%;
height: auto;
}
Обратите внимание на то, что элемент img будет отзывчивым даже в том случае, если для него указаны фиксированные размеры через атрибуты в HTML разметке (т.е. width=»960″ height=»640″). Это замечательно, т.к. данная техника подходит для поддержки и обслуживания контента, для которого заданы фиксированные размеры в HTML.
Отзывчивые изображения и колонки
Иногда нам хочется, чтобы изображения располагались рядом друг с другом в колонках. Например, в галереях часто используются сетки для отображения превью изображений. Чтобы создать отзывчивые изображения в колонках, нам нужно только уменьшить значение CSS свойства width и задать для элементов img свойство display со значением inline-block. Давайте рассмотрим пару вариантов макета: двухколоночный и трехколоночный макет с изображениями.
Двухколоночный отзывчивый макет с изображениями
Для подобного макета мы можем установить CSS свойство width со значением 48% или, грубо говоря, половина ширины контейнера. Причина, по которой мы не указываем 50%, заключается в том, чтобы оставить место под внешние отступы.
HTML
<div class="container"> <img src="image01.jpg" width="960" height="640" /> <img src="image02.jpg" width="960" height="640" /> </div>
CSS
img {
width: 48%;
display: inline-block;
}
Трехколоночный отзывчивый макет с изображениями
Для данного макета идея остается прежней, т.е. мы просто выставляем для свойства width значение равное одной третьей ширины контейнера: 32%.
HTML
<div class="container"> <img src="image01.jpg" width="960" height="640" /> <img src="image02.jpg" width="960" height="640" /> <img src="image03.jpg" width="960" height="640" /> </div>
CSS
.three-columns {
width: 32%;
display: inline-block;
}
Изображения с условными переходами
Наличие нескольких условных переходов для отзывчивых изображений — это хорошая идея, т.к. если изображения станут слишком маленькими, колонки могут просто «схлопнуться». А чтобы это произошло, нам потребуются медиа-запросы. В следующем примере изображения будут отображаться в одну колонку на смартфонах, в две колонки — на планшетах и в четыре колонки — на больших экранах.
HTML
<div class="container"> <img src="image01.jpg" width="960" height="640" /> <img src="image02.jpg" width="960" height="640" /> <img src="image03.jpg" width="960" height="640" /> <img src="image04.jpg" width="960" height="640" /> </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%.
container {
width: 100%;
}
img {
width: 100%;
}
Предупреждение
Несмотря на то, что данная техника создания отзывчивых изображений является простой и имеет хорошую браузерную поддержку, ее недостаток заключается в том, что мы всегда работаем с исходными размерами изображений. Это означает, что большие изображения с высоким разрешением будут загружаться даже у тех пользователей, которые используют небольшое мобильное устройство, на котором все равно нельзя оценить всей прелести полноэкранных изображений.
Если вы хотите опционально подгружать для пользователей разные версии одного изображения (например, небольшое изображение для мобильных устройств, а большое — для настольных компьютеров), чтобы улучшить производительность мобильного веба, познакомьтесь с атрибутом srcset и/или элементом picture. Если вы предпочитаете использование полифиллов (polyfill), чтобы обеспечить поддержку в текущих версиях браузеров, обратите внимание на полифилл Скотта Джела (Scott Jehl) под названием Picturefill.
Источник
