အတ် img
အတ် img သည် ရုပ်ပုံကိုဖန်တီးပေးသည်။ ရုပ်ပုံလမ်းကြောင်းကို
attribute src တွင်ရေးသားပါသည်။ ပိတ်ထားရန် အတ် မလိုအပ်ပါ။
Attributes များ
| Attribute | ဖော်ပြချက် |
|---|---|
src |
ရုပ်ပုံသို့ လမ်းကြောင်းကို သတ်မှတ်ပေးသည်။
မဖြစ်မနေထည့်သွင်းရမည့် attribute။ |
alt |
ရုပ်ပုံကိုမတွေ့ပါက (ဥပမာ၊ လမ်းကြောင်းမှားရေးထားပါက) ရုပ်ပုံအစား ပြသမည့် အစားထိုးစာသား။
မဖြစ်မနေထည့်သွင်းရမည့် attribute။ ပျက်ကွက်ပါက validator (HTML သို့မဟုတ် CSS ၏မှန်ကန်မှုကိုစစ်ဆေးသည့်ပရိုဂရမ်) က မနှစ်မြို့ဖွယ်ပြမည်။ |
width |
ရုပ်ပုံ၏အကျယ်၊ ပစ်ကယ်များဖြင့် (ဤအခြေအနေတွင် ယူနစ်များကိုမဖော်ပြပါ) သို့မဟုတ် ရုပ်ပုံ၏မိဘမှရာခိုင်နှုန်းဖြင့်။ |
height |
�ုပ်ပုံ၏အမြင့်၊ ပစ်ကယ်များဖြင့် (ဤအခြေအနေတွင် ယူနစ်များကိုမဖော်ပြပါ) သို့မဟုတ် ရုပ်ပုံ၏မိဘမှရာခိုင်နှုန်းဖြင့်။ |
အသေးစိတ်အချက်များ
ရုပ်ပုံအတွက် အကျယ်နှင့် အမြင့် နှစ်မျိုးလုံး သတ်မှတ်မထားပါက - ရုပ်ပုံသည် ၎င်း၏ လက်တွေ့ အရွယ်အစားကို ရှိမည်ဖြစ်သည်။ အမြင့်ကိုသာ သတ်မှတ်ထားပါက ရုပ်ပုံသည် သတ်မှတ်ထားသည့် အမြင့်သို့ရောက်ရှိပြီး ၎င်း၏ အချိုးအစားများမပျက်ယွင်းစေရန် အကျယ်သည် အလိုက်သင့်ညှိပေးမည်။
အကျယ်ကိုသာ သတ်မှတ်ထားပါက - အလားတူပင်၊ ရုပ်ပုံသည် အချိုးအစားများကိုထိန်းသိမ်းရန် အမြင့်ကို အလိုက်သင့်ညှိပေးမည်။
အကျယ်နှင့် အမြင့် နှစ်မျိုးလုံး သတ်မှတ်ထားပါက - ရုပ်ပုံ၏အချိုးအစားများသည် ပျက်ယွင်းနိုင်သည် (သို့မဟုတ်မပျက်နိုင်ပါ၊ သင်မှန်းဆသည့်အတိုင်း)။ အကျယ် သို့မဟုတ် အမြင့် (သို့မဟုတ် နှစ်မျိုးစလုံး) သည် လက်တွေ့ထက်ကြီးနေပါက ရုပ်ပုံသည် ကြီးလာမည်ဖြစ်သော်လည်း အရည်အသွေးတွင်ဆုံးရှုံးမည်။
ရုပ်ပုံများအတွက် အကျယ်နှင့်အမြင့်ကို attributes များဖြင့် (CSS မှတစ်ဆင့်မဟုတ်ဘဲ) သတ်မှတ်ရန် အကြံပြုအပ်ပါသည် - ဤနည်းဖြင့် browser သည် ရုပ်ပုံများကို ပိုမိုမြန်ဆန်စွာ ဆွဲချမည် - ရုပ်ပုံတစ်ခုစီရရှိပြီးနောက် ၎င်း၏အရွယ်အစားကို တွက်ချက်ရန် မလိုအပ်ပါ။
လက်တွေ့ရုပ်ပုံ၏အရွယ်အစားများကို မလိုအပ်ဘဲ လျှော့ချရန် အကြံမပြုပါ။ ဥပမာ၊
ရုပ်ပုံ၏လက်တွေ့အရွယ်အစားသည် 1000 x 1000
ပစ်ကယ်များ၊ ပြီးတော့ သင်က ၎င်းကို အကျယ် 100px ဟုသတ်မှတ်လိုက်သည်။
ဤအခြေအနေတွင် ရုပ်ပုံသည် စခရင်ပေါ်တွင် 100 ပစ်ကယ်များအဖြစ်ပေါ်လာမည်၊ သို့သော်
ပစ်ကယ်တစ်ထောင်စလုံးအရွယ်အစားရှိပြီး၊ ထို့ကြောင့် များစွာပိုမိုကြာမြင့်စွာ ဆွဲချရမည်။
ဥပမာ
ဝဘ်ဆိုက်ပေါ်သို့ ရုပ်ပုံတစ်ခုထည့်ကြပြီး
attributes height နှင့် width တို့ကို မသတ်မှတ်ကြပါစို့။
ရုပ်ပုံသည် ၎င်း၏လက်တွေ့အရွယ်အစားကို ရှိမည်:
<img src="monkey.png" alt="မျောက်ဝံလေး">
:
ဥပမာ
ရုပ်ပုံအတွက် attribute width ကို အသုံးပြု၍ အကျယ်သတ်မှတ်ကြည့်ကြပါစို့။
ဤသို့ပြုလုပ်ရာတွင် အမြင့်သည် ရုပ်ပုံ၏အချိုးအစားများကိုထိန်းသိမ်းရန် အလိုက်သင့်ညှိပေးသင့်သည်:
<img src="monkey.png" width="200" alt="မျောက်ဝံလေး">
:
ဥပမာ
ယခုတစ်ကြိမ် ရုပ်ပုံအတွက် attribute height ကို အသုံးပြု၍ အမြင့်သတ်မှတ်ကြည့်ကြပါစို့။
ဤသို့ပြုလုပ်ရာတွင် အကျယ်သည် ရုပ်ပုံ၏အချိုးအစားများကိုထိန်းသိမ်းရန် အလိုက်သင့်ညှိပေးသင့်သည်:
<img src="monkey.png" height="100" alt="မျောက်ဝံလေး">
:
ဥပမာ
ရုပ်ပုံအတွက် အမြင့်နှင့် အကျယ် နှစ်မျိုးလုံးကို တစ်ပြိုင်နက်ထဲထည့်ကြည့်ကြပါစို့။ ဤသို့ပြုလုပ်ရာတွင် ရုပ်ပုံ၏အချိုးအစားများသည် ပျက်ယွင်းသွားသင့်သည် (မဖြစ်မနေမဟုတ်ပါ၊ သို့သော် ဤကိစ္စတွင် အမြင့်နှင့်အကျယ်ကို အချိုးအစားများပျက်ယွင်းစေရန် ရွေးချယ်ထားသည်):
<img src="monkey.png" height="100" width="300" alt="မျောက်ဝံလေး">
:
ဥပမာ
ရုပ်ပုံအတွက် လမ်းကြောင်းမှားယွင်းစွာထည့်ကြည့်ကြပါစို့
(ရိုးရှင်းစေရန် လမ်းကြောင်းကို ဗလာထားပါမည်)။ ရုပ်ပုံအစား
attribute alt ၏အကြောင်းအရာကို မြင်တွေ့ရမည်
(ဤသည်မှာ ပုံမှန်စာသားဟုထင်ရသော်လည်း ၎င်းကို ကူးယူကြည့်ပါ -
မည်သည့်အရာမျှမရပါ၊ ၎င်းသည် ရုပ်ပုံတစ်ခုကဲ့သို့ ဆွဲဆောင်သွားမည်):
<img src="" alt="မျောက်ဝံလေး">
:
ဆက်လက်ဖတ်ရှုရန်
-
property
width,
သည် element ၏အကျယ်ကိုသတ်မှတ်ပေးသည် -
property
height,
သည် element ၏အကျယ်ကိုသတ်မှတ်ပေးသည် -
အတ်
figure,
သည် ရုပ်ပုံများနှင့် ၎င်းတို့၏ခေါင်းစဉ်များကို စုစည်းပေးသည် -
အတ်
figcaption,
သည် ရုပ်ပုံအတွက် ခေါင်းစဉ်ကို သတ်မှတ်ပေးသည် -
property
background-image,
သည် နောက်ခံရုပ်ပုံကို သတ်မှတ်ပေးသည်