HTML Тег <picture>
Приклад
Як використовувати тег <picture>:
<picture>
<source media="(min-width:650px)" srcset="../images/img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="../images/img_white_flower.jpg">
<img src="../images/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Спробуйте самі »
Визначення та використання
Тег <picture> надає веброзробникам більше гнучкості у визначенні ресурсів зображень.
Найпоширенішим використанням елемента <picture> буде художній напрям в адаптивному дизайні. Замість того, щоб мати одне зображення, масштаб якого збільшується або зменшується залежно від ширини вікна перегляду, можна створити кілька зображень, які краще заповнюють вікно перегляду браузера.
Елемент <picture> містить два теги: один або кілька тегів <source> і один тег <img>.
Браузер шукатиме перший елемент <source> елемент, де медіазапит відповідає поточній ширині вікна перегляду, і тоді він відобразить належне зображення (вказане в атрибуті srcset). Елемент <img> потрібен як останній дочірній елемент елемента <picture>, як запасний варіант, якщо жоден із вихідних тегів не відповідає.
Порада: Елемент <picture> працює "подібно" до <video> і <audio>. Ви встановлюєте різні джерела, і перше джерело, яке відповідає вподобанням, це те, що використовується.
Підтримка браузерами
Числа в таблиці вказують на першу версію браузера, яка повністю підтримує елемент.
| Елемент | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Глобальні атрибути
Тег <picture> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <picture> також підтримує Атрибути подій в HTML.
Пов’язані сторінки
HTML Підручник: HTML елемент <picture>
CSS Підручник: CSS Адаптивний веб-дизайн - Зображення
