Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

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> Тег <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>



Пример

Как использовать тег <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="Цветы" style="width:auto;">
</picture>
Попробуйте сами »


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

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

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

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

браузер будет искать во первых элемент <source>, где медиа запрос соответствует текущей ширине видового экрана, и тогда он отобразит правильное изображение (указанное в атрибуте srcset). Элемент <img> требуется в качестве последнего дочернего элемента <picture>, в качестве запасного варианта, если ни один из исходных тегов не совпадает.

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


Поддержка браузеров <picture>

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

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

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

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


События атрибутов <picture>

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


Связанные страницы <picture>

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