تعریف و کاربرد برچسب <picture>در HTML
برچسب <picture> به توسعه دهندگان وب اجازه می دهد انعطاف پذیری بیشتری در تعیین منابع تصویر داشته باشند.
شایع ترین استفاده از عنصر <picture> برای جهت هنری در طرح های پاسخگو خواهد بود. به جای داشتن یک تصویر که بر اساس عرض عرض نمایش بزرگ می شود، چندین تصویر را می توان طراحی کرد تا به سادگی مرورگر مرورگر را پر کند.
عنصر <picture> دارای دو برچسب مختلف است: یک یا چند برچسب <source> و یک برچسب <img>.
عنصر <source> دارای ویژگی های زیر است:
srcset (مورد نیاز) - نشانی اینترنتی تصویر برای نشان دادن را تعریف می کند
media - هر پرس و جو معتبر رسانه ای که به طور معمول در CSS تعریف می شود را می پذیرد
اندازه - یک توصیفگر عرض واحد، یک پرس و جو رسانه ای تنها با توصیف عرض و یا یک لیست محدود از کاما از پرس و جو رسانه ای با توصیف عرض
type - نوع MIME را تعریف می کند
مرورگر از مقادیر ویژگی برای بارگذاری مناسب ترین تصویر استفاده می کند. مرورگر از اولین <source> عنصر با یک اشاره تطابق استفاده کرده و هر تگ <source> زیر را نادیده می گیرد.
عنصر <img> به عنوان آخرین برچسب فرزند بلوک اعلامیه <picture> مورد نیاز است. عنصر <img> برای ارائه سازگاری به عقب برای مرورگرهایی که عنصر <picture> را پشتیبانی نمی کنند، یا اگر هیچ یک از تگ <source> مطابقت نداشته باشد، استفاده می شود.
عنصر <picture> شبیه عناصر <video> و <audio> است. شما منابع مختلف را تنظیم می کنید و اولین منبع که مطابق ترجیحات می باشد، مورد استفاده قرار می گیرد.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
