دليل مرجعي HTML

كامل قائمة عناصر HTML

HTML: <picture> العنصر

يقدم عناصر HTML <picture> عبر تضمين صفر أو أكثر من عناصر <source> وعنصر <img> لتقديم إصدارات صورة مختلفة للظروف المختلفة في العرض/الجهاز. سيختار المتصفح العنصر الفرعي <source> الأكثر تطابقًا، وإذا لم يكن هناك تطابق، سيختار URL الخاص بالعنصر <img> في خصائص src. ثم يعرض الصورة في المساحة التي تشغلها علامة <img>.

مثال

يظهر صورة مختلفة بناءً على حجم الشاشة المختلفة، إذا لم يتم العثور على تطابق أو لا يدعم المتصفح خاصية picture فيمكن استخدام عنصر img:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات (oldtoolbag.com)</title>
</head>
<body>
<h2>element الصورة</h2>
<picture>
　　<source media="(min-width: 650px)" srcset="/run/html/views.png">
　　<source media="(min-width: 465px)" srcset="/run/html/default.jpg">
　　<img src="/run/html/haha.gif" style="width:auto;">
</picture>
</body>
</html>

التحقق من ذلك لـ <‹/›>

تعريف

يسمح عنصر picture بعرض صور مختلفة على أجهزة مختلفة، وغالباً ما يتم استخدامه في الاستجابة.

أدخل HTML5 عنصر <picture>، مما يسمح بتعديل موارد الصور بشكل أكثر مرونة.

يحتوي عنصر <picture> على عدد صفر أو أكثر من عناصر <source> وعدد واحد من عناصر <img>، حيث يتطابق كل عنصر <source> مع جهاز مختلف ويقوم بتشغيل مصدر مختلف للصور، و如果没有 تطابق، يتم اختيار عنوان URL في خاصية src لعنصر <img>.

ملاحظة: 　　　　

　　　　　　　　يتم وضع عنصر <img> كآخر 　<picture> بعد العنصر، إذا لم يدعم المتصفح الخاصية، فإنه يعرض صورة <img>. 　　　　

دعم المتصفح

الرقم في الجدول يظهر إصدار المتصفح الأول الذي يدعم العنصر.

IEFirefoxOperaChromeSafari

الفرق بين HTML 4.01 و HTML5

خصائص <picture> تم تعريفها كلياً من قبل HTML5.

خصائص العولمة

دعم <picture> علامة خصائص العولمة لـ HTML.

خصائص الحدث

دعم <picture> علامة خصائص الحدث لـ HTML.

HTML: <q> العلامة HTML: <pre> العلامة