CSS သည် object-fit Property ဖြစ်သည်။
object-fit<img> သို့မဟုတ် <video> ကို ၎င်း၏ကွန်တိန်နာနှင့် အံဝင်ခွင်ကျဖြစ်စေရန်အတွက် CSS ပိုင်ဆိုင်မှုကို သတ်မှတ်ရန် အသုံးပြုပါသည်။
CSS object-fit Property
object-fit<img> သို့မဟုတ် <video> ကို ၎င်း၏ကွန်တိန်နာနှင့် အံဝင်ခွင်ကျဖြစ်စေရန်အတွက် CSS ပိုင်ဆိုင်မှုကို သတ်မှတ်ရန် အသုံးပြုပါသည်။
ဤပိုင်ဆိုင်မှုသည် ကွန်တိန်နာကို နည်းလမ်းအမျိုးမျိုးဖြင့် ဖြည့်ရန် အကြောင်းအရာကို ပြောပြသည်။ "ထိုအချိုးအစားကို ထိန်းသိမ်းထားပါ" သို့မဟုတ် "ဆန့်ထုတ်ပြီး တတ်နိုင်သမျှ နေရာယူပါ" ကဲ့သို့သော။
Paris မှ အောက်ပါပုံကို ကြည့်ပါ။ ဤပုံသည် 400 pixels ကျယ်ပြီး 300 pixels မြင့်သည်-
သို့သော်၊ ကျွန်ုပ်တို့သည် အထက်ပုံအား ၎င်း၏ အကျယ် (200 pixels) နှင့် တူညီသော အမြင့် (300 pixels) ဖြစ်အောင် ပုံစံချပါက၊ ၎င်းသည် ဤကဲ့သို့ ဖြစ်နေလိမ့်မည်-
ဥပမာ
img {
width: 200px;
height:
300px;
}
ပုံအား 200x300 pixels ကွန်တိန်နာနှင့် အံဝင်ခွင်ကျဖြစ်အောင် ပိုင်းဖြတ်ထားသည် (၎င်း၏မူရင်းရှုထောင့်အချိုးသည် ပျက်စီးသွားသည်)။
ဤနေရာတွင် object-fitပိုင်ဆိုင်ခွင့် ဝင်လာပါသည်။ ပိုင်ဆိုင်မှု object-fitသည် အောက်ပါတန်ဖိုးများထဲမှ တစ်ခုကို ယူနိုင်သည်-
fill- ဤသည်မှာ ပုံသေဖြစ်သည်။ ပေးထားသောအတိုင်းအတာကိုဖြည့်ရန် ပုံအား အရွယ်အစားပြောင်းထားသည်။ လိုအပ်ပါက ရုပ်ပုံအား အံဝင်ခွင်ကျဖြစ်စေရန် ဆန့်ထုတ်ခြင်း သို့မဟုတ် ဖိလိုက်ပါမည်။contain- ရုပ်ပုံသည် ၎င်း၏အချိုးအစားကို ထိန်းသိမ်းထားသော်လည်း ပေးထားသည့်အတိုင်းအတာအတွင်း အံဝင်ခွင်ကျဖြစ်အောင် အရွယ်အစားပြောင်းထားသည်။cover- ရုပ်ပုံသည် ၎င်း၏အချိုးအစားကို ထိန်းသိမ်းထားပြီး ပေးထားသည့်အတိုင်းအတာကို ဖြည့်ပေးသည်။ ပုံအား အံကိုက်ဖြစ်အောင် ညှပ်ထားပါမည်။none- ပုံသည် အရွယ်အစား မပြောင်းလဲပါ။scale-down- ရုပ်ပုံအား အသေးငယ်ဆုံးဗားရှင်းသို့ အတိုင်းအတာအထိ ချဲ့ထားသည်none။contain
object-fit ကိုအသုံးပြုခြင်း- အဖုံး;
အကယ်၍ object-fit: cover;ကျွန်ုပ်တို့သည် ရုပ်ပုံအား အသုံးပြုပါက ၎င်း၏ အချိုးအစားကို ထိန်းသိမ်းထားပြီး ပေးထားသော အတိုင်းအတာကို ဖြည့်ပေးပါသည်။ ပုံအား အံကိုက်ဖြစ်အောင် ညှပ်လိုက်ပါမည်။
ဥပမာ
img {
width: 200px;
height:
300px;
object-fit: cover;
}
object-fit: container ကိုအသုံးပြုခြင်း;
အကယ်၍ object-fit: contain;ကျွန်ုပ်တို့သည် ရုပ်ပုံအား ၎င်း၏ ရှုထောင့်အချိုးကို ထိန်းသိမ်းထားသော်လည်း ပေးထားသည့်အတိုင်းအတာအတွင်း အံဝင်ခွင်ကျဖြစ်စေရန်အတွက် အရွယ်အစားကို ပြောင်းလဲထားသည်။
ဥပမာ
img {
width: 200px;
height:
300px;
object-fit: contain;
}
object-fit: ဖြည့်စွက်အသုံးပြုခြင်း;
အကယ်၍ object-fit: fill;ကျွန်ုပ်တို့သည် ပေးထားသော အတိုင်းအတာကို ဖြည့်ရန် ပုံအား အရွယ်အစားကို ပြောင်းလဲအသုံးပြုပါ။ လိုအပ်ပါက၊ ရုပ်ပုံအား အံဝင်ခွင်ကျဖြစ်စေရန် ဆန့်ထုတ်ခြင်း သို့မဟုတ် ဖြတ်သွားပါမည်။
ဥပမာ
img {
width: 200px;
height:
300px;
object-fit: fill;
}
object-fit ကိုအသုံးပြုခြင်း- none;
အကယ်၍ object-fit: none;ကျွန်ုပ်တို့သည် ပုံအား အရွယ်အစား မပြောင်းလဲပါက၊
ဥပမာ
img {
width: 200px;
height:
300px;
object-fit: none;
}
Object-fit ကိုအသုံးပြုခြင်း- စကေး-ဆင်း;
အကယ်၍ object-fit: scale-down;ကျွန်ုပ်တို့သည် ပုံကိုအသုံးပြုပါက အသေးငယ်ဆုံးဗားရှင်းသို့ အတိုင်းအတာ noneသို့မဟုတ်
contain:
ဥပမာ
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
နောက်ဥပမာ
ဤနေရာတွင် ကျွန်ုပ်တို့တွင် ပုံနှစ်ပုံရှိပြီး ၎င်းတို့ကို ဘရောက်ဆာဝင်းဒိုး၏ အကျယ် 50% နှင့် အမြင့် 100% ဖြည့်စွက်စေလိုပါသည်။
အောက်ဖော်ပြပါ ဥပမာတွင် ကျွန်ုပ်တို့အသုံးမပြုပါ object-fit၊ ထို့ကြောင့် ဘရောက်ဆာဝင်းဒိုးကို ကျွန်ုပ်တို့ အရွယ်အစားပြောင်းသောအခါ၊ ပုံများ၏ အချိုးအစားသည် ပျက်စီးသွားလိမ့်မည်-
ဥပမာ
နောက်ဥပမာတွင်၊ ကျွန်ုပ်တို့အသုံးပြု object-fit: cover;သည်၊ ထို့ကြောင့် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းသည့်အခါ၊ ပုံများ၏ ရှုထောင့်အချိုးကို ထိန်းသိမ်းထားပါသည်-
ဥပမာ
CSS object-fit နောက်ထပ် ဥပမာများ
အောက်ပါဥပမာသည် ဥပမာ object-fitတစ်ခုတွင် ပိုင်ဆိုင်မှု၏ ဖြစ်နိုင်ချေတန်ဖိုးအားလုံးကို သရုပ်ပြသည်-
ဥပမာ
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
CSS Object-* Properties
အောက်ပါဇယားတွင် CSS object-* ဂုဏ်သတ္တိများကို စာရင်းပြုစုထားသည်။
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |