عنصر <picture> HTML
يتيح لك عنصر HTML <picture>عرض صور مختلفة لأجهزة مختلفة أو أحجام شاشات.
عنصر HTML <picture>
يمنح عنصر HTML <picture>مطوري الويب مزيدًا من المرونة في تحديد موارد الصور.
يحتوي <picture>العنصر على عنصر واحد أو أكثر <source>، كل عنصر يشير إلى صور مختلفة من خلال srcset
السمة. بهذه الطريقة يمكن للمتصفح اختيار الصورة التي تناسب العرض الحالي و / أو الجهاز.
كل <source>عنصر له
mediaسمة تحدد متى تكون الصورة هي الأنسب.
مثال
عرض صور مختلفة لأحجام الشاشات المختلفة:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
ملاحظة: حدد دائمًا <img>عنصرًا باعتباره آخر عنصر فرعي <picture>للعنصر. يتم <img>استخدام العنصر بواسطة المتصفحات التي لا تدعم <picture>العنصر ، أو في حالة عدم <source>تطابق أي من العلامات.
متى تستخدم عنصر الصورة
هناك غرضان رئيسيان <picture>للعنصر:
1. عرض النطاق الترددي
إذا كانت لديك شاشة أو جهاز صغير ، فليس من الضروري تحميل ملف صورة كبير. سيستخدم المستعرض <source>
العنصر الأول مع قيم السمات المطابقة ، ويتجاهل أيًا من العناصر التالية.
2. تنسيق الدعم
قد لا تدعم بعض المتصفحات أو الأجهزة جميع تنسيقات الصور. باستخدام
<picture>العنصر ، يمكنك إضافة صور بجميع التنسيقات ، وسيستخدم المتصفح التنسيق الأول الذي يتعرف عليه ، ويتجاهل أيًا من العناصر التالية.
مثال
سيستخدم المتصفح تنسيق الصورة الأول الذي يتعرف عليه:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
ملاحظة: سيستخدم المستعرض <source>العنصر الأول مع قيم السمات المطابقة ، ويتجاهل أي <source>عناصر تالية.
علامات صورة HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
للحصول على قائمة كاملة بجميع علامات HTML المتاحة ، تفضل بزيارة مرجع علامات HTML الخاص بنا .