Адаптивне зображення для сайту

Адаптивне зображення для сайту

Зображення в адаптивному (пристосовується 🙂) дизайні, як відомо, одна з найскладніших сторін. Потрібно враховувати кожен елемент, щоб все виглядало правильно на різних пристроях і екранах, від великих широких екранів до екранів в 320 пікселів. Тому що час «квадратних» моніторів йде, їх поступово замінюють широкоформатні телевізори, монітори і планшети. Зображення повинні стискатися і розтягуватися відповідно.

Загальне рішення

Як правило, раніше використовували наступний CSS код щоб зробити зображення адаптивним:

Ми використовуємо властивість max-width: 100% щоб зображення ніколи не виходило за межі батьківського контейнера (блоку). Тому при зміні самого блоку, в якому знаходиться зображення, відповідно змінюватиметься розмір самого зображення. А властивість height: auto; відповідає за те, щоб зберігалася пропорційність сторін зображення при масштабуванні.

Адаптивне зображення для сайту

Нове рішення проблеми (адаптивне зображення) -

- це новий тег, який з'явився у версії HTML5. Він дозволяє робити зображення адаптивними і його принцип роботи схожий на теги

    Він дозволяє завантажувати різні зображення в залежності від умов:
  • Результатів медіа запитів (media queries);
  • Щільності пікселів.
      • Що це дає:
    • Завантаження найоптимальнішого і відповідного зображення;
    • Зображення може обрізатися в залежності від формату екрану;
    • Завантаження великих за розміром зображень для моніторів з високою роздільною здатністю.

    Як працює тег ?

      Розглянемо по кроках:
  • Створюємо відкриває і закриває тег .
  • Усередині цього тега, пишемо стільки тегів . скільки потрібно умов.
  • В атрибуті media у тега пишемо ті умови висоти або ширини, при якому потрібно показувати це зображення.
  • За допомогою атрибута srcset вказуємо шлях до зображення.
  • Додаємо додатковий тег зображення .

    • Можливо ви вже помітили, що синтаксис, який використовується в атрибуті media дуже схожий на синтаксис CSS медіа запитів. Також в якості умов можна використовувати max-width. min-width. max-height. min-height. orientation.

    Використовуйте ці перевірки для того щоб задати умови горизонтального або вертикального положення планшета або мобільного пристрою, а також максимальні розміри екрану. наприклад:

    Тобто ви можете довантажувати певну версію зображення в залежності від дозволу екрану користувача.

    Використання

    Даний тег добре підтримується браузерами Chrome, Opera і Firefox. В майбутньому планується що цей тег буде мати широке застосування.

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

    Даний тег, завантажений за допомогою цього плагіна буде працювати з деякими обмеженнями.

    Адаптивність сайту стала пріоритетом при його створенні. Адже правильно створивши структуру немає необхідності в окремому створенні мобільної версії сайту. Тому що шаблон сам буде підлаштовуватися під відповідний дозвіл. 🙂

    Схожі статті