HTML <picture> Tag
ဥပမာ
<picture> tag ကို အသုံးပြုနည်း။
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
tag သည် <picture>ပုံအရင်းအမြစ်များကို သတ်မှတ်ရာတွင် ဝဘ်ဆော့ဖ်ဝဲရေးသားသူများကို ပိုမိုပျော့ပြောင်းစေသည်။
ဒြပ်စင် ၏ အသုံးအများဆုံး <picture>မှာ တုံ့ပြန်မှုရှိသော ဒီဇိုင်းများတွင် အနုပညာဦးတည်ချက်အတွက်ဖြစ်သည်။ viewport အကျယ်ကို အခြေခံ၍ အပေါ် သို့မဟုတ် အောက်ကို စကေးချထားသည့် ပုံတစ်ပုံရှိမည့်အစား၊ ပုံများစွာသည် browser viewport ကို ပိုမိုလှပစွာဖြည့်ရန် ဒီဇိုင်းထုတ်နိုင်သည်။
<picture>ဒြပ်စင်တွင် တဂ်နှစ်ခုပါဝင်သည်- တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော
< source> တဂ်များနှင့် <img> တဂ်တစ်ခု။
ဘရောက်ဆာသည် မီဒီယာမေးမြန်းချက်သည် လက်ရှိမြင်ကွင်းပို့အကျယ်နှင့် ကိုက်ညီသည့် ပထမဆုံး <source> ဒြပ်စင်ကို ရှာဖွေမည်ဖြစ်ပြီး၊ ထို့နောက် ၎င်းသည် သင့်လျော်သောပုံ (srcset ရည်ညွှန်းချက်တွင် သတ်မှတ်ထားသော) ကို ပြသမည်ဖြစ်သည်။ <picture>အရင်းအမြစ်တဂ်တစ်ခုမှ မကိုက်ညီပါက အစားထိုးရွေးချယ်မှုအဖြစ် <img> ဒြပ်စင်ကို အစိတ်အပိုင်း၏ နောက်ဆုံးကလေးအဖြစ် လိုအပ်ပါသည် ။
အကြံပြုချက်- ဒြပ် <picture>စင်သည် <video> နှင့် <audio> တို့နှင့် "ဆင်တူသည်" နှင့် လုပ်ဆောင်သည်။ သင်သည် မတူညီသော ရင်းမြစ်များကို သတ်မှတ်ပြီး နှစ်သက်ရာနှင့် ကိုက်ညီသော ပထမဆုံး အရင်းအမြစ်မှာ အသုံးပြုနေသည့် အရာဖြစ်သည်။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ဒြပ်စင်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ
<picture>tag သည် HTML တွင် Global Attributes ကို ပံ့ပိုး ပေးပါသည်။
ဖြစ်ရပ်ဂုဏ်တော်များ
<picture>tag သည် HTML ရှိ Event Attributes ကိုလည်း ပံ့ပိုး ပေးပါသည် ။
ဆက်စပ်စာမျက်နှာများ
HTML သင်ခန်းစာ- HTML <picture> Element
CSS ကျူတိုရီရယ်- CSS တုံ့ပြန်မှုဒီဇိုင်း - ပုံများ