object-fit ဂုဏ်သတ္တိ

object-fit ဂုဏ်သတ္တိသည် ရုပ်ပုံ သို့မဟုတ် ဗီဒီယိုကဲ့သို့သော အရာဝတ္ထုများ၏ အချိုးအစား သို့မဟုတ် အရွယ်အစားညှိခြင်းကို သတ်မှတ်ပေးသည်။

ဖွဲ့စည်းပုံ

selector {
	object-fit: fill သို့မဟုတ် contain သို့မဟုတ် cover သို့မဟုတ် none;
}

အောက်ပါဇယားတွင် object-fit ဂုဏ်သတ္တိအတွက် အဓိကတန်ဖိုးများကို ဖော်ပြထားသည်။

တန်ဖိုး	ဖော်ပြချက်
`fill`	သတ်မှတ်ထားသောအရွယ်အစားနှင့် ကိုက်ညီစေရန် အရာဝတ္ထုကို အရွယ်အစားညှိခြင်း၊ ဤအခြေအနေတွင် အရာဝတ္ထု၏ အချိုးအစားများကို လျစ်လျူရှုထားသည်။
`contain`	သတ်မှတ်ထားသောအရွယ်အစားနှင့် ကိုက်ညီစေရန် အရာဝတ္ထုကို အရွယ်အစားညှိခြင်း၊ ဤအခြေအနေတွင် အရာဝတ္ထု၏ အချိုးအစားများကို ထိန်းသိမ်းထားသည်။
`cover`	သတ်မှတ်ထားသောနေရာတစ်ခုလုံးကို ဖြည့်စွက်ရန် အရာဝတ္ထု၏အရွယ်အစားများကို ပြောင်းလဲခြင်း၊ ဤအခြေအနေတွင် အရာဝတ္ထုကိုယ်တိုင်၏ အချိုးအစားများကို ထိန်းသိမ်းထားသည်။
`none`	အရာဝတ္ထု၏ မူလအရွယ်အစားများကို ထိန်းသိမ်းထားသည်။

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

<div>
	<img src="bg.png">
</div>

img {
	object-fit: fill;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

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

<div>
	<img src="bg.png">
</div>

img {
	object-fit: contain;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

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

<div>
	<img src="bg.png">
</div>

img {
	object-fit: cover;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

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

<div>
	<img src="bg.png">
</div>

img {
	object-fit: none;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

aspect-ratio ဂုဏ်သတ္တိ၊
ထိုဂုဏ်သတ္တိသည် အရာဝတ္ထု၏ အချိုးအစားကို သတ်မှတ်ပေးသည်။