HTML picture Tag

HTML picture Tag – يُستخدم الوسم <picture> لإعطاء مرونة لمطوري الويب لتحديد مصادر الصور.

HTML picture Tag

يحتوي الوسم <picture> على وسمين:

• <source>: لتحديد مصادر وسائط متعددة (يمكن أن يكون واحد أو أكثر). سيبحث المتصفح على هذا العنصر الأول حيث يتطابق الاستعلام عن الوسائط مع عرض منفذ viewport العرض الحالي ، ثم سيعرض الصورة المناسبة المحددة في سمة srcset.
• <img>: لتقديم إصدارات بديلة من الصورة لحالات مختلفة للعرض أو للأجهزة. كما أنه مطلوب باعتباره العنصر الفرعي الأخير للعنصر <picture> كخيار احتياطي إذا لم تتطابق أي من وسوم <source>.

إذا كان المستعرض لا يدعم الوسم <picture> فسيتم تحديد عنوان URL لسمة src الخاصة بالعنصر <img>. ثم يتم تقديم الصورة المحددة في المساحة التي يشغلها عنصر <img>.

مثال للتوضيح

شغل إيدك

إستخدام الوسم <picture> مع وسمين <source> ووسم <img>، مع تحديد أحجام الشاشات التى ستظهر عليها كل صورة:

<picture> 
    <source srcset="/images/image1.png" media="(min-width: 900px)"> 
    <source srcset="/images/image2.png" media="(min-width: 500px)"> 
      
    <img src="/images/general_image.png" alt="Person Image"> 
</picture> 

السمات العامة – Global Attributes

الوسم <picture> يدعم السمات العامة أيضًا، تعرف عليهم عن طريق هذا الرابط: السمات العامة – Global Attributes.

سمات الحدث – Event Attributes

كما يدعم الوسم <picture> سمات الحدث أيضًا، تعرف عليهم عن طريق هذا الرابط: سمات الحدث – Event Attributes.

إقرأ أيضًا – HTML <picture> Tag

الوسوم المتعلقة: <img> – <source>.

دعم المتصفحات

38.0	38.0	13.0	9.1	25.0