ہیٹل HTML <picture> تگ

تعریف اور استعمال

<picture> علامت، ویب ڈیولپر کو مقرر کردہ تصویر منبع کو ترجیح دینے میں زیادہ سے زیادہ سہولت فراہم کرتی ہے۔

<picture> عنصر کا سب سے عام استعمال جوابی ڈیزائن میں آرٹ ڈائریکشن میں ہوتا ہے۔ کئی تصاویر کا استعمال کرسکتے ہیں تاکہ بہتر طور پر بروسر کی سائز کو پرکشش بناسکتے ہیں، نہ کہ کسی تصویر کو بروسر کی سائز کے مطابق مساوی طور پر بڑھادا یا چھوڑادا جائے گا۔

<picture> عنصر دو علامت کا حامل ہوتا ہے: ایک یا کئی، <source> علامت، اور ایک <img> علامت،。

بھنگاراوا کا جستجو کردا ہے کہ آپ کی سائز کی کسی میدان کو جو کسی منبع علامت سے مطابقت کرسکتی ہو، بعد ازاں وہ صحیح تصویر (srcset نمائش میں دی گئی) نمائش کردا ہے۔ <img> عنصر کا طور پر استعمال کیا جاتا ہے، <picture> عنصر کا آخری ذیلی عنصر ضروری ہوتا ہے، جس کو کسی source کے علامت کو میچ نہ کرنے پر استعمال کیا جائے گا۔

نکات:<picture> عنصر کا کام کس طرح ہوتا ہے، <video> اور <audio> مثل. آپ کسی منبع مختلف کو ستیار کرسکتے ہیں، پہلے ترجیح کئے گئے منبع کو استعمال کیا جائے گا。

دوسری مراجع:

HTML کورس:HTML <picture> عنصر

CSS کورس:CSS ریپونزایو ڈیزائن - تصاویر

مثال

<picture> تگ کا استعمال کا طریقہ:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

آپ خود کا تجربہ کریئن

عالمی اپریشن

<picture> تگ بھی مدد فراہم کرتی ہے HTML میں عالمی اپریشن。

واقعیتی کی اپریشن

<picture> تگ بھی مدد فراہم کرتی ہے HTML میں واقعیتی کی اپریشن。

براوزر کی مدد

جداول میں دوسرے براوزر کی نسلیں مخصوص تگ کا پہلا مکمل سپورٹ نہایت دکھائی دیتے ہیں。

کروم ایج فائر فاکس سافری آپریا
کروم ایج فائر فاکس سافری آپریا
38.0 13.0 38.0 9.1 25.0