HTML <picture> Element
HTML <picture>ဒြပ်စင်သည် သင့်အား မတူညီသော စက်ပစ္စည်းများ သို့မဟုတ် မျက်နှာပြင်အရွယ်အစားများအတွက် မတူညီသောပုံများကို ပြသခွင့်ပြုသည်။
HTML <picture> Element
HTML <picture>ဒြပ်စင်သည် ရုပ်ပုံအရင်းအမြစ်များကို သတ်မှတ်ရာတွင် ဝဘ်ဆော့ဖ်ဝဲရေးဆွဲသူများကို ပိုမိုပျော့ပြောင်းစေသည်။
<picture>ဒြပ်စင်တွင် တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော ဒြပ် စင်များပါရှိသည် <source>၊ တစ်ခုစီသည် မတူညီသောပုံများကို ရည်ညွှန်းသော ရည်ညွှန်း srcset
ချက်တစ်ခုဖြစ်သည်။ ဤနည်းဖြင့် ဘရောင်ဇာသည် လက်ရှိမြင်ကွင်းနှင့်/သို့မဟုတ် စက်ပစ္စည်းနှင့် အသင့်တော်ဆုံး ပုံကို ရွေးချယ်နိုင်သည်။
ပုံတစ်ပုံ ချင်းစီ သည် အသင့်တော်ဆုံးဖြစ်သည့်အခါ သတ်မှတ် <source>သည့်
mediaattribute တစ်ခုစီပါရှိသည်။
ဥပမာ
မတူညီသော မျက်နှာပြင်အရွယ်အစားများအတွက် မတူညီသောပုံများကို ပြပါ-
<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 Element ကို ဘယ်အချိန်မှာ သုံးမလဲ။
<picture>ဒြပ်စင် အတွက် အဓိကရည်ရွယ်ချက် နှစ်ခုရှိသည် ။
1. Bandwidth
သင့်တွင် သေးငယ်သော စခရင် သို့မဟုတ် စက်တစ်ခုရှိလျှင် ကြီးမားသော ရုပ်ပုံဖိုင်ကို တင်ရန် မလိုအပ်ပါ။ <source>
ဘရောင်ဇာ သည် ကိုက်ညီသော attribute တန်ဖိုးများနှင့်အတူ ပထမဒြပ်စင်ကို အသုံးပြုမည်ဖြစ်ပြီး အောက်ပါဒြပ်စင်များကို လျစ်လျူရှုပါမည်။
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> ဘရောင်ဇာ သည် ကိုက်ညီသော attribute တန်ဖိုးများဖြင့် ပထမဒြပ်စင်ကို အသုံးပြုမည်ဖြစ်ပြီး အောက်ပါ <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 Tag အကိုးအကားကို ဝင်ရောက်ကြည့်ရှု ပါ။