علامة <picture> HTML
مثال
كيفية استخدام علامة <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="Flowers" style="width:auto;">
</picture>
التعريف والاستخدام
تمنح <picture>العلامة مطوري الويب مزيدًا من المرونة في تحديد موارد الصور.
سيكون الاستخدام الأكثر شيوعًا <picture>للعنصر هو التوجيه الفني في التصميمات سريعة الاستجابة. بدلاً من الحصول على صورة واحدة يتم تكبيرها أو تصغيرها بناءً على عرض إطار العرض ، يمكن تصميم صور متعددة لملء إطار عرض المتصفح بشكل أفضل.
يحتوي <picture>العنصر على علامتين: علامة أو أكثر من
علامات <source > وعلامة <img> واحدة .
سيبحث المتصفح عن أول عنصر <source> حيث يتطابق الاستعلام عن الوسائط مع عرض منفذ العرض الحالي ، ثم سيعرض الصورة المناسبة (المحددة في سمة srcset). عنصر <img> مطلوب باعتباره العنصر الفرعي الأخير <picture>للعنصر ، كخيار احتياطي إذا لم تتطابق أي من علامات المصدر.
نصيحة: يعمل <picture>العنصر "مشابهًا" لـ <video> و <audio>. تقوم بإعداد مصادر مختلفة ، والمصدر الأول الذي يناسب التفضيلات هو الذي يتم استخدامه.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم العنصر بشكل كامل.
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
السمات العالمية
تدعم <picture>العلامة أيضًا السمات العامة في HTML .
سمات الحدث
تدعم <picture>العلامة أيضًا سمات الحدث في HTML .
الصفحات ذات الصلة
دروس HTML: HTML <picture> Element
دروس CSS: تصميم مستجيب لـ CSS - صور