aspect-ratio Property

aspect-ratio property သည် flex block များအတွက် ကန့်လန့်ဝင်ရိုးတစ်လျှောက် နှင့် grid များအတွက် အလျားလိုက်ဝင်ရိုးတစ်လျှောက် element များ၏ ညှိခြင်းကို သတ်မှတ်ပေးသည်။ မိဘ element သို့ သုံးစွဲသည်။

Syntax

selector {
	aspect-ratio: auto သို့မဟုတ် ဘက်အချိုးအစား;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`auto`	Element တွင် နှစ်သက်ရာ ဘက်အချိုးအစား မရှိပါ၊ ဘရောက်ဆာသည် element ၏ အနံနှင့် အမြင့်ပေါ် မူတည်၍ အလိုအလျောက် သတ်မှတ်ပေးသည်။
`ဘက်အချိုးအစား`	ဘက်အချိုးအစားကို `16/9` ကဲ့သို့ ရေးသားရပြီး၊ ဤနေရာတွင် ပထမဂဏန်းသည် အနံ ဖြစ်၍ ဒုတိယဂဏန်းသည် အမြင့် ဖြစ်သည်။ တန်ဖိုးတစ်ခုခု မသတ်မှတ်ထားပါက ၎င်းကို `1` နှင့် ညီမျှသည်ဟု ယူဆသည်။ ဘက်အချိုးအစားအချို့ကို ဂဏန်းတစ်လုံးဖြင့် ရေးသားခွင့်လည်း ရှိသည်။ ဥပမာ၊ `2/1` ကို `0.5` အဖြစ် ရေးသားနိုင်ပြီး ရလဒ်အတူတူပင် ရရှိမည်။
`auto && ဘက်အချိုးအစား`	ဘက်အချိုးအစားသည် `auto` keyword နှင့် အတူလာပါက (ဥပမာ: `auto` `1/2`)၊ သတ်မှတ်ထားသော ဘက်အချိုးအစားကို ရွေးချယ်သွားမည် ဖြစ်သော်လည်း ၎င်း၏ကိုယ်ပိုင် ဘက်အချိုးအစားရှိသော အစားထိုးနိုင်သည့် element များ (ရုပ်ပုံများ၊ ဗီဒီယိုများ ကဲ့သို့) အတွက်မူ ၎င်းတို့၏ ကိုယ်ပိုင်ဘက်အချိုးအစားကိုသာ အသုံးပြုမည်။

ဥပမာ

ခလုတ်တစ်ခုအတွက် အလိုအလျောက် ဘက်အချိုးအစား သတ်မှတ်ကြည့်ရအောင်:

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: auto;
	background-color: #9DDFA4;
	padding: 1em;
}

ဥပမာ

ယခု ခလုတ်တစ်ခုအတွက် ဘက်အချိုးအစားကို 1/2 အဖြစ် သတ်မှတ်ကြည့်ရအောင်:

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: 1/2;
	background-color: #9DDFA4;
	padding: 1em;
}

ဤသည်ကိုလည်း ကြည့်ပါ

object-fit property,
သည် element များကို အချိုးချညှိပေးသည်