العنصر <picture>

من موسوعة حسوب
< HTML
مراجعة 15:36، 28 يناير 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1')
اذهب إلى التنقل اذهب إلى البحث

يُمثِّل العنصر <picture> حاويةً تُستخدَم لتحديد عدِّة مصادر عبر العنصر <source> لصورة <img> محتواة داخله؛ وسيختار المتصفح أنسب مصدر للصورة اعتمادًا على تخطيط الصفحة (أي الصندوق المحتوى فيه هذا العنصر) والجهاز الذي ستُعرَض الصورة داخله (هل شاشته عادية أم عالية الدقة).

مثال عن استخدام العنصر <picture> لتخديم صورة شعار عريضة إن تحقق شرط media query معيّن (وهو أن يكون العرض على الأقل 600 بكسل) وذلك باستخدام الخاصية media مع العنصر <source>؛ وإذا لم تحقق شرط media query فسيتم تخطي العنصر <source> والانتقال إلى ما بعده:

<picture>
 <source srcset="logo-wide.png" media="(min-width: 600px)">
 <img src="logo-narrow.png" alt="Logo">
</picture>

مثال عن استخدام العنصر <picture> لتخديم صورة بنوع MIME معيّن، وإن لم يدعم المتصفح ذاك النوع (أي صيغة الصور لا تعمل في المتصفح) فسيتم تخطي العنصر <source> والانتقال إلى ما بعده:

<picture>
 <source srcset="logo.svg" type="image/svg+xml">
 <img src="logo.png" alt="Logo">
</picture>
تصنيفات المحتوى عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي.
المحتوى المسموح عنصر <source> صفر مرة أو أكثر، يتبعه العنصر <img>.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل العناصر التضمينية.
واجهة DOM HTMLPictureElement

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

Chrome Firefox Edge Safari Opera
38 38 13 9.1 25

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

مصادر ومواصفات