Лого SiteHere.ru

Делаем адаптивное изображение на сайте

Адаптивное изорабажение

Изображения в адаптивном (приспосабливающийся 🙂 ) дизайне, как известно, одна из самых сложных сторон. Нужно учитывать каждый элемент, чтобы все смотрелось правильно на различных устройствах и экранах, от больших широких экранов до экранов в 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> ?

    Рассмотрим по шагам:
  1. Создаем открывающий и закрывающий тег <picture> </picture>.
  2. Внутри этого тега, пишем столько тегов <source>, сколько нужно условий.
  3. В атрибуте media у тега <source> пишем те условия высоты или ширины, при котором нужно показывать это изображение.
  4. С помощью атрибута srcset указываем путь до изображения.
  5. Добавляем дополнительный тег изображения <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 2.0

После скачивания файла picturefill.js подключите его между тегами <head> </head>:

1
<script src="picturefill.js"></script>

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



Вывод

Адаптивность сайта стала приоритетом при его создании. Ведь правильно создав структуру нет необходимости в отдельном создании мобильной версии сайта. Потому что шаблон сам будет подстраиваться под соответствующее разрешение. 🙂

С Уважением, Юрий Немец

Источник: http://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images—cms-21015

4 комментария к записи
  • Max

    а где демо версия?

     
  • Nazar

    Как подключить это к adobe muse

     
  • Сергей

    Спасибо! Как просто оказалось

     
  • Виктор

    Да не все так просто. на компе изображение растягивается и становится в не резкости, а надо , чтобы оно имело родные размеы, а вот на мобильном, чтобы не залезало за экран

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *