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