علامة <picture> في HTML
التعريف والاستخدام
<picture> العلامة تجعل مطوري الويب أكثر مرونة عند تحديد موارد الصور.
<picture> أكثر استخدامات العنصر الشائعة هي تصميم الاتجاه الفني في التصميم التفاعلي. يمكنك تصميم عدة صور لملء عرض النافذة الخاصة بالمتصفح بشكل أفضل بدلاً من تضخيم أو تقليل حجم الصورة بناءً على عرض النافذة.
<picture> العناصر تحتوي على علامتين: واحدة أو أكثر <source> علامة و <img> علامة.
سيبحث المتصفح عن أول عنصر <source> الذي يتطابق مع استعلامات وسائل الإعلام مع عرض النافذة الحالي، ثم سيقوم بعرض الصورة الصحيحة (المحددة في srcset). يتم استخدام عنصر <img> ك <picture> المكون الوراثي الأخير للعنصر ضروري، ويستخدم كخيار بديل عندما لا تتطابق أي علامة source.
إشارة:<picture> يشتغل عنصر <video> و <audio> مماثلة. يمكنك تعيين مصادر مختلفة، وسيتم استخدام المصدر الأول المفضل.
يرجى الرجوع إلى:
تدريس HTML:عنصر <picture> HTML
تدريس CSS:طراحی پاسخگو CSS - تصاویر
مثال
<picture> روش استفاده از تگ:
<picture> <source media="(min-width:650px)" srcset="flowers-1.jpg"> <source media="(min-width:465px)" srcset="flowers-2.jpg"> <img src="flowers-3.jpg" alt="Flowers" style="width:auto;"> </picture>
ویژگی‌های جهانی
<picture> این تگ همچنین از ویژگی‌های جهانی در HTML.
ویژگی‌های رویداد
<picture> این تگ همچنین از ویژگی‌های رویداد در HTML.
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این تگ را کامل پشتیبانی می‌کنند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
