Робимо адаптивне зображення на сайті

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

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

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

1234

img {max-width: 100%-height: auto-}

Відео: Як зробити зображення адаптивним

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

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

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

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

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

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

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

Ось приклад:

12345

="Smaller.jpg" media="(Max-width: 768px)"gt;="Default.jpg"gt;lt;img srcset="Default.jpg" alt="Моє основне зображення"gt;lt;/picturegt;

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

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

1234567

="Smaller_landscape.jpg" media="(Max-width: 40em) and (orientation: landscape)"gt;="Smaller_portrait.jpg" media="(Max-width: 40em) and (orientation: portrait)"gt;="Default_landscape.jpg" media="(Min-width: 40em) and (orientation: landscape)"gt;="Default_portrait.jpg" media="(Min-width: 40em) and (orientation: portrait)"gt;lt;img srcset="Default_landscape.jpg" alt="Моє основне зображення"gt;lt;/picturegt;

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

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

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

Якщо ви хочете вже зараз користуватися цим тегом і при цьому щоб вона працювала у всіх браузерах - також є для цього рішення. Використання javascript бібліотеки Picturefill 2.0.

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

1

lt;script src="Picturefill.js"gt; lt;/scriptgt;

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

висновок

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

З повагою, Юрій Німець

Відео: CSS Як розтягнути фон на весь екран

джерело: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images-cms-21015