Адаптивное изображение часто крайне необходимо для качественных проектов, но вот его реализация бывает затруднительна. К тому же, при верстке под мобильные устройства, под которые необходимо иметь урезанную версию картинки.
Как это реализовать правильно на HTML5?
Любой качественный адаптивный сайт не может обойтись без резиновых изображений, которые соответствуют всем требованиям. На данный момент существует несколько способов, которые могут решать данный вопрос. И лишь один из них является функциональным и соответствующий всем стандартам, но достаточно редко используемый. Ранее мы рассматривали медиа-запросы, которые способны задать любому элементу необходимые правила, в зависимости от размера экрана. Существует прекрасный его аналог, который я советую вам использовать.
Для начала, давайте поочередно рассмотрим и сравним возможные варианты решения данной проблемы.
Как делали раньше
Данный способ создания адаптивного изображения является действенным и качественным, в котором даже нет необходимости использования медиа-запросов. Код имеет всего 2 строчки, которые выполняют свои функции на ура:
|
1 2 3 4 |
img { max-width: 100%; height: auto; } |
Строка 2 — задаётся правило, согласно которому максимальная ширина изображения будет равна ширине экрана устройства. Таким образом, ширина картинки будет меняться, в зависимости от размера экрана.
Строка 3 — согласно данному правилу, при изменение max-width, высота картинки будет меняться пропорционально её ширине. Собственно, чтобы картинка имела заданные изначально пропорции.
Как я уже сказал — железный вариант, для быстрого задания адаптивности изображению, но отсутствует возможность создания изображения под мобильные устройства, без задания дополнительных свойств.
Как делают сейчас с помощью HTML5
Современное решение для создания адаптивного изображения имеет несколько существенных преимуществ, которые заслуживают внимания:
- адаптивность изображения;
- автоматический подбор оптимальной картинки;
- возможность обрезки изображения;
- не требуются css-правила;
- валидный код.
Все эти преимущества содержит в себе HTML5-тег — <picture>. Его синтаксис может показаться необычным, но как только вы к нему привыкнете — поймете, что это действительно круто:
|
1 2 3 4 5 |
<picture> <source srcset="mobile.jpg" media="(max-width: 320px)" alt="Урезанная картинка"> <source srcset="standart.jpg"> <img srcset="standart.jpg" alt="Исходная картинка"> </picture> |
Все элементы, привычно обрамляются в тег, в котором есть:
- img — всем привычный тег изображения;
- source — новый тег, в котором мы записываем условие для определенного размера экрана и соответствующее ему изображение. Таких тегов должно быть столько, сколько условий мы хотим создать.
Помимо этого существует новый для нас тег: srcset — не стоит пугаться, он необходим только для задания пути к изображению.
Последний тег media имеет роль медиа-запроса. Как видно из примера, синтаксис записи аналогичен тому, что мы записываем в CSS — ничего сложного.
В качестве медиа-запросов можно использовать:
- max-width;
- min-width;
- max-height;
- min-height;
- orientation.
Таким образом, есть возможность подгружать необходимые картинки для любой ориентации и размера экрана:
|
1 2 3 4 5 6 7 |
<picture> <source srcset="mobile_landscape.jpg" media="(max-width: 30em) and (orientation: landscape)"> <source srcset="mobile_portrait.jpg" media="(max-width: 30em) and (orientation: portrait)"> <source srcset="standart_landscape.jpg" media="(min-width: 30em) and (orientation: landscape)"> <source srcset="standart_portrait.jpg" media="(min-width: 30em) and (orientation: portrait)"> <img srcset="standart_landscape.jpg" alt="Исходная картинка"> </picture> |
Вывод
С помощью этих 2 способов можно сделать адаптивное изображение на всех видах устройств, но как мы уже выяснили тег <picture> имеет больше возможностей и преимуществ, чем его аналог. Я советую пользоваться именно вторым вариантом, так как его синтаксис выглядит очень приятно и не требует внесения изменений в CSS.
Однако, для каждого случая следует подбирать вариант индивидуально, в зависимости от требований и возможностей в создании.
