Ноябрь 4, 2019 Запись была обновлена
Делаем адаптивное изображение на сайте
Изображения в адаптивном (приспосабливающийся 🙂 ) дизайне, как известно, одна из самых сложных сторон. Нужно учитывать каждый элемент, чтобы все смотрелось правильно на различных устройствах и экранах, от больших широких экранов до экранов в 320 пикселей. Потому что время «квадратных» мониторов уходит, их постепенно заменяют широкоэкранные телевизоры, мониторы и планшеты. Изображения должны сжиматься и растягиваться соответственно.
Общее решение
Как правило, раньше использовали следующий CSS код чтобы сделать изображение адаптивным:
1 2 3 4 | img { max-width: 100%; height: auto; } |
Мы используем свойство max-width: 100% чтобы изображение никогда не выходило за пределы родительского контейнера (блока). Поэтому при изменении самого блока, в котором находится изображение, соответственно будет меняться размер самого изображения. А свойство height: auto; отвечает за то, чтобы сохранялась пропорциональность сторон изображения при масштабировании.
Новое решение проблемы (адаптивное изображение) — <picture>
<picture> — это новый тег, который появился в версии HTML5. Он позволяет делать изображения адаптивными и его принцип работы похож на теги <audio> и <video>.
- Он позволяет загружать разные изображения в зависимости от условий:
- Результатов медиа запросов (media queries);
- Плотности пикселей.
- Что это дает:
- Загрузка самого оптимального и подходящего изображения;
- Изображение может обрезаться в зависимости от формата экрана;
- Загрузка больших по размеру изображений для мониторов с высоким разрешением.
Как работает тег <picture> ?
- Рассмотрим по шагам:
- Создаем открывающий и закрывающий тег <picture> </picture>.
- Внутри этого тега, пишем столько тегов <source>, сколько нужно условий.
- В атрибуте media у тега <source> пишем те условия высоты или ширины, при котором нужно показывать это изображение.
- С помощью атрибута srcset указываем путь до изображения.
- Добавляем дополнительный тег изображения <img>.
Вот пример:
1 2 3 4 5 | <picture> <source srcset="smaller.jpg" media="(max-width: 768px)"> <source srcset="default.jpg"> <img srcset="default.jpg" alt="Мое основное изображение"> </picture> |
Возможно вы уже заметили, что синтаксис, который используется в атрибуте media очень похож на синтаксис CSS медиа запросов. Также в качестве условий можно использовать max-width, min-width, max-height, min-height, orientation.
Используйте эти проверки для того чтобы задать условия горизонтального или вертикального положения планшета или мобильного устройства, а также максимальные размеры экрана. Например:
1 2 3 4 5 6 7 | <picture> <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)"> <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)"> <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)"> <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)"> <img srcset="default_landscape.jpg" alt="Мое основное изображение"> </picture> |
То есть вы можете подгружать определенную версию изображение в зависимости от разрешения экрана пользователя.
Использование <picture>
Данный тег хорошо поддерживается браузерами Chrome, Opera и Firefox. В будущем планируется что этот тег будет иметь широкое применение.
Если вы хотите уже сейчас пользоваться этим тегом и при этом чтобы он работал во всех браузерах — также есть для этого решение. Использование Javascript библиотеки Picturefill 2.0.
После скачивания файла picturefill.js подключите его между тегами <head> </head>:
1 | <script src="picturefill.js"></script> |
Данный тег, загруженный с помощью этого плагина будет работать с некоторыми ограничениями.
Вывод
Адаптивность сайта стала приоритетом при его создании. Ведь правильно создав структуру нет необходимости в отдельном создании мобильной версии сайта. Потому что шаблон сам будет подстраиваться под соответствующее разрешение. 🙂
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
а где демо версия?
Как подключить это к adobe muse
Спасибо! Как просто оказалось
Да не все так просто. на компе изображение растягивается и становится в не резкости, а надо , чтобы оно имело родные размеы, а вот на мобильном, чтобы не залезало за экран