Тег <picture> даёт веб-разработчикам больше гибкости при указании ресурсов изображений. Чаще всего элемент <picture> используется для художественного оформления адаптивного дизайна. Вместо одного изображения, масштабируемого вверх или вниз в зависимости от ширины области просмотра, можно создать несколько изображений, чтобы они лучше заполняли область просмотра браузера. Элемент <picture> содержит два тега: один или несколько тегов <source> и один тег <img>. Браузер будет искать первый элемент <source>, где медиа-запрос соответствует текущей ширине области просмотра, а затем отобразит правильное изображение (указанное в атрибуте srcset). Элемент <img> требуется в качестве последнего дочернего элемента <picture> в качестве запасного варианта, если ни один из исходных тегов не совпадает.
<picture> թեգը վեբ մշակողներին ավելի ճկունություն է տալիս պատկերի ռեսուրսները նշելիս: <picture> տարրի ամենատարածված օգտագործումը արձագանքող դիզայնի ձևավորումն է: Տեսադաշտի լայնության վրա հիմնված մեկ պատկերի չափը մեծացնելու կամ իջեցնելու փոխարեն, դուք կարող եք ստեղծել մի քանի պատկեր՝ բրաուզերի տեսադաշտը ավելի լավ լրացնելու համար: <picture> տարրը պարունակում է՝ մեկ կամ ավելի <source> թեգ և մեկ <img> թեգ: Բրաուզերը կփնտրի առաջին <source> տարրը, որտեղ մեդիա հարցումը համընկնում է ընթացիկ չափսերի լայնության հետ, և այնուհետև ցույց կտա ճիշտ պատկերը (նշված է srcset հատկանիշում): <img> տարրը պահանջվում է որպես <picture> տարրի վերջին միջոց, եթե սկզբնական թեգերից ոչ մեկը չի համընկնում:
See the Pen picture by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.
⇓Результат данного примера показан на рисунке⇓
⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓
Совет: Элемент <picture> работает «аналогично» элементам <video> и <audio>. Вы настраиваете разные источники, и используется первый источник, который соответствует предпочтениям.
Հուշում.<picture> տարրն աշխատում է «նմանապես», ինչպես <video> և <audio> տարրերը: Դուք ստեղծում եք տարբեր աղբյուրներ, և օգտագործվում է առաջին աղբյուրը, որը համապատասխանում է ձեր նախըննտրածին:
| Browser | IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| Version | 11 | 13+ | 38+ | 38+ | 9.1+ | 25+ |