ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
Теги HTML HTML учебник Теги CSS CSS учебник JavaScript учебник PHP учебник SQL учебник Bootstrap 4 Еще
×

HTML Ссылки

HTML по Алфавиту HTML по Категориям HTML Атрибуты Тегов HTML Атрибуты Глобал HTML Атрибуты Событий HTML Цвета HTML Холсты HTML Аудио / Видео HTML Наборы символов HTML DOCTYPEs HTML Кодирование URL HTML Языковые коды HTML Коды стран HTTP Ответы сервера HTTP Методы PX в EM конвертер Горячие клавиши

HTML Теги

<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>



HTML <picture> Тег

❮Назад Полный HTML Ссылки Дальше ❯

Пример

Использование тега <picture>:

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Определение и использование

Тег <picture> позволяет веб-разработчикам больше гибкости в определении ресурсов изображения.

Наиболее распространенным использованием элемента <picture> будет направление арт в адаптивных проектах. Вместо одного изображения, которое масштабируется вверх или вниз в зависимости от ширины видового экрана, несколько изображений могут быть разработаны для более красиво заполнить окно просмотра браузера.

Элемент <picture> содержит два разных тега: один или несколько <source> Теги и один <img> Тег.

Элемент <source> имеет следующие атрибуты:

  • srcset (required) - Определяет URL-адрес изображения для отображения
  • media - принимает любой допустимый запрос носителя, который обычно определяется в CSS
  • sizes - определяет один дескриптор ширины, один запрос носителя с дескриптором ширины или список с разделителями-запятыми запросов мультимедиа с дескриптором ширины
  • type - dОпределяет тип MIME

Обозреватель будет использовать значения атрибутов для загрузки наиболее подходящего изображения. Обозреватель будет использовать первый элемент <source> с соответствующей подсказкой и игнорировать следующие <source> Теги.

The <img> element is required as the last child tag of the <picture> блок объявления. Элемент <img> используется для обеспечения обратной совместимости для обозревателей, которые не поддерживают элемент <picture>, или если ни один из тегов <source> не соответствует.

Элемент <picture> работает аналогично элементам <video> и <audio>. Вы устанавливаете различные источники, и первый источник, который соответствует предпочтениям, используется.

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает элемент.

Элемент
<picture> 38.0 13.0 38.0 9.1 25.0

Различия между HTML 4,01 и HTML5

Тег <picture> является новым в HTML5.

Глобальные атрибуты

Тег <picture> также поддерживает Глобальные атрибуты в HTML.

Атрибуты события

Тег <picture> также поддерживает Атрибуты событий в HTML.

Похожие страницы

CSS Учебник: CSS адаптивный дизайн изображений


❮Назад Полный HTML Ссылки Дальше ❯