HTML Tutorial

عنصر <picture>

استخدام <Picture>

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

سمات <picture>

  • لا توجد سمات خاصة بالعنصر <picture>.

أمثلة على <picture>

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1024px)">
  <img srcset="large.jpg" alt="صورة">
</picture>

مثال توضيحي لاستكشاف علامة <picture>

<!DOCTYPE html>
<html>
<body>

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1024px)">
  <img srcset="large.jpg" alt="صورة">
</picture>

</body>
</html>