အတ် img

အတ် img သည် ရုပ်ပုံကိုဖန်တီးပေးသည်။ ရုပ်ပုံလမ်းကြောင်းကို attribute src တွင်ရေးသားပါသည်။ ပိတ်ထားရန် အတ် မလိုအပ်ပါ။

Attributes များ

အသေးစိတ်အချက်များ

ရုပ်ပုံအတွက် အကျယ်နှင့် အမြင့် နှစ်မျိုးလုံး သတ်မှတ်မထားပါက - ရုပ်ပုံသည် ၎င်း၏ လက်တွေ့ အရွယ်အစားကို ရှိမည်ဖြစ်သည်။ အမြင့်ကိုသာ သတ်မှတ်ထားပါက ရုပ်ပုံသည် သတ်မှတ်ထားသည့် အမြင့်သို့ရောက်ရှိပြီး ၎င်း၏ အချိုးအစားများမပျက်ယွင်းစေရန် အကျယ်သည် အလိုက်သင့်ညှိပေးမည်။

အကျယ်ကိုသာ သတ်မှတ်ထားပါက - အလားတူပင်၊ ရုပ်ပုံသည် အချိုးအစားများကိုထိန်းသိမ်းရန် အမြင့်ကို အလိုက်သင့်ညှိပေးမည်။

အကျယ်နှင့် အမြင့် နှစ်မျိုးလုံး သတ်မှတ်ထားပါက - ရုပ်ပုံ၏အချိုးအစားများသည် ပျက်ယွင်းနိုင်သည် (သို့မဟုတ်မပျက်နိုင်ပါ၊ သင်မှန်းဆသည့်အတိုင်း)။ အကျယ် သို့မဟုတ် အမြင့် (သို့မဟုတ် နှစ်မျိုးစလုံး) သည် လက်တွေ့ထက်ကြီးနေပါက ရုပ်ပုံသည် ကြီးလာမည်ဖြစ်သော်လည်း အရည်အသွေးတွင်ဆုံးရှုံးမည်။

ရုပ်ပုံများအတွက် အကျယ်နှင့်အမြင့်ကို attributes များဖြင့် (CSS မှတစ်ဆင့်မဟုတ်ဘဲ) သတ်မှတ်ရန် အကြံပြုအပ်ပါသည် - ဤနည်းဖြင့် browser သည် ရုပ်ပုံများကို ပိုမိုမြန်ဆန်စွာ ဆွဲချမည် - ရုပ်ပုံတစ်ခုစီရရှိပြီးနောက် ၎င်း၏အရွယ်အစားကို တွက်ချက်ရန် မလိုအပ်ပါ။

လက်တွေ့ရုပ်ပုံ၏အရွယ်အစားများကို မလိုအပ်ဘဲ လျှော့ချရန် အကြံမပြုပါ။ ဥပမာ၊ ရုပ်ပုံ၏လက်တွေ့အရွယ်အစားသည် 1000 x 1000 ပစ်ကယ်များ၊ ပြီးတော့ သင်က ၎င်းကို အကျယ် 100px ဟုသတ်မှတ်လိုက်သည်။ ဤအခြေအနေတွင် ရုပ်ပုံသည် စခရင်ပေါ်တွင် 100 ပစ်ကယ်များအဖြစ်ပေါ်လာမည်၊ သို့သော် ပစ်ကယ်တစ်ထောင်စလုံးအရွယ်အစားရှိပြီး၊ ထို့ကြောင့် များစွာပိုမိုကြာမြင့်စွာ ဆွဲချရမည်။

ဥပမာ

ဝဘ်ဆိုက်ပေါ်သို့ ရုပ်ပုံတစ်ခုထည့်ကြပြီး attributes height နှင့် width တို့ကို မသတ်မှတ်ကြပါစို့။ ရုပ်ပုံသည် ၎င်း၏လက်တွေ့အရွယ်အစားကို ရှိမည်:

html<img src="monkey.png" alt="မျောက်ဝံလေး">

Результат:

ဥပမာ

ရုပ်ပုံအတွက် attribute width ကို အသုံးပြု၍ အကျယ်သတ်မှတ်ကြည့်ကြပါစို့။ ဤသို့ပြုလုပ်ရာတွင် အမြင့်သည် ရုပ်ပုံ၏အချိုးအစားများကိုထိန်းသိမ်းရန် အလိုက်သင့်ညှိပေးသင့်သည်:

html<img src="monkey.png" width="200" alt="မျောက်ဝံလေး">

Результат:

ဥပမာ

ယခုတစ်ကြိမ် ရုပ်ပုံအတွက် attribute height ကို အသုံးပြု၍ အမြင့်သတ်မှတ်ကြည့်ကြပါစို့။ ဤသို့ပြုလုပ်ရာတွင် အကျယ်သည် ရုပ်ပုံ၏အချိုးအစားများကိုထိန်းသိမ်းရန် အလိုက်သင့်ညှိပေးသင့်သည်:

html<img src="monkey.png" height="100" alt="မျောက်ဝံလေး">

Результат:

ဥပမာ

ရုပ်ပုံအတွက် အမြင့်နှင့် အကျယ် နှစ်မျိုးလုံးကို တစ်ပြိုင်နက်ထဲထည့်ကြည့်ကြပါစို့။ ဤသို့ပြုလုပ်ရာတွင် ရုပ်ပုံ၏အချိုးအစားများသည် ပျက်ယွင်းသွားသင့်သည် (မဖြစ်မနေမဟုတ်ပါ၊ သို့သော် ဤကိစ္စတွင် အမြင့်နှင့်အကျယ်ကို အချိုးအစားများပျက်ယွင်းစေရန် ရွေးချယ်ထားသည်):

html<img src="monkey.png" height="100" width="300" alt="မျောက်ဝံလေး">

Результат:

ဥပမာ

ရုပ်ပုံအတွက် လမ်းကြောင်းမှားယွင်းစွာထည့်ကြည့်ကြပါစို့ (ရိုးရှင်းစေရန် လမ်းကြောင်းကို ဗလာထားပါမည်)။ ရုပ်ပုံအစား attribute alt ၏အကြောင်းအရာကို မြင်တွေ့ရမည် (ဤသည်မှာ ပုံမှန်စာသားဟုထင်ရသော်လည်း ၎င်းကို ကူးယူကြည့်ပါ - မည်သည့်အရာမျှမရပါ၊ ၎င်းသည် ရုပ်ပုံတစ်ခုကဲ့သို့ ဆွဲဆောင်သွားမည်):

html<img src="" alt="မျောက်ဝံလေး">

Результат:

ဆက်လက်ဖတ်ရှုရန်