background-size ဂုဏ်သတ္တိ

background-size ဂုဏ်သတ္တိသည် နောက်ခံပုံ၏ အရွယ်အစားကို သတ်မှတ်ပေးသည်။ ဤဂုဏ်သတ္တိ၏ တန်ဖိုးများမှာ မည်သည့် အရွယ်အစားယူနစ်များ ဖြစ်စေ၊ သို့မဟုတ် သော့ချက်စကားလုံးများ ဖြစ်သော auto, cover သို့မဟုတ် contain တို့ ဖြစ်သည်။

ဝါကျဖွဲ့စည်းပုံ

ရွေးချယ်သူ {
	background-size: တန်ဖိုး;
}

သော့ချက်စကားလုံးများ

တန်ဖိုး	ရှင်းလင်းချက်
`auto`	နောက်ခံသည် သဘာဝအရွယ်အစားရှိမည်၊ နောက်ခံပုံ၏ လက်တွေ့အရွယ်အစားအတိုင်း ဖြစ်သည်။ သို့သော် `auto` ကို တစ်ဖက်တည်းအတွက်သာ သတ်မှတ်ပါက၊ ထိုဘက်တွင် နောက်ခံသည် အချိုးမပျက်စေဘဲ အရွယ်ချဲ့ရန် ပြုလုပ်မည်ဖြစ်သည်။
`cover`	ပုံကို အချိုးအတိုင်း ထိန်းသိမ်းကာ ဘလောက်တစ်ခုလုံးကို ဖုံးအုပ်နိုင်အောင် အရွယ်ချဲ့ပေးသည်။ ပုံသည် တစ်ခုလုံးနေရာယူရန် ကြိုးစားသော်လည်း အမြဲတမ်းမအောင်မြင်နိုင်သဖြင့် ၎င်း၏ အစိတ်အပိုင်းတစ်ခုသည် ဖြတ်တောက်ခံရမည်။ ဘလောက်ကို ပုံဖြင့် အမြဲတမ်းလုံးဝဖုံးအုပ်ထားမည်။
`contain`	ပုံကို အချိုးအတိုင်းထိန်းသိမ်းကာ ဘလောက်အတွင်းသို့ အပြည့်အဝ နေရာယူနိုင်အောင် အရွယ်ချဲ့ပေးသည်။ ဤသို့ပြုလုပ်ရာတွင် ၎င်းသည် အကျယ်အပြည့် သို့မဟုတ် အမြင့်အပြည့် နေရာယူနိုင်သည် (ပုံ၏အချိုးနှင့် အစိတ်အပိုင်း၏အရွယ်အစားပေါ်တွင် မူတည်သည်)။ ဘလောက်ကို ယေဘုယျအားဖြင့် ပုံဖြင့် အပြည့်အဝ မဖုံးအုပ်နိုင်ပါ (သို့သော် ပုံကို အမြဲတမ်းအပြည့်အဝမြင်ရမည်၊ သေးငယ်သွားသော်လည်း)။

စံထားရှိသော တန်ဖိုး - auto.

အသုံးပြုခြင်း

အရွယ်အစားယူနစ်များနှင့် auto တို့ကို မတူညီသော ပေါင်းစပ်မှုများဖြင့် အသုံးပြုနိုင်သည်၊ ဥပမာ - auto 20px, သို့မဟုတ် 30% 20px, သို့မဟုတ် auto 30% စသည်ဖြင့်။ ဤအခါတွင် ပထမပါရာမီတာသည် နောက်ခံ၏အကျယ်အရွယ်အစားကို သတ်မှတ်ပေးပြီး၊ ဒုတိယပါရာမီတာသည် နောက်ခံ၏အမြင့်အရွယ်အစားကို သတ်မှတ်ပေးသည်။ ပါရာမီတာတစ်ခုသာ သတ်မှတ်ထားပါက၊ ထိုပါရာမီတာသည် နောက်ခံ၏အကျယ်နှင့် အမြင့်နှစ်ခုလုံး၏အရွယ်အစားကို တစ်ပြိုင်နက် သတ်မှတ်ပေးမည်။

ဥပမာ

ယခု နောက်ခံပုံသည် ၎င်း၏ သဘာဝအရွယ်အစားအတိုင်း ရှိနေမည် -

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 550px;
	height: 400px;
}

ဥပမာ

ယခု နောက်ခံပုံသည် အရွယ်အစား 300px အပေါ် 400px ရှိမည် (ကျွန်ုပ်တို့၏ကိစ္စတွင် ပုံ၏အချိုး ပျက်စီးသွားမည်) -

<div id="elem"></div>

#elem {
	background-size: 300px 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

ဥပမာ

ယခု နောက်ခံပုံသည် အရွယ်အစား 400px အပေါ် 400px ရှိမည် (ကျွန်ုပ်တို့၏ကိစ္စတွင် ပုံ၏အချိုး ပျက်စီးသွားမည်) -

<div id="elem"></div>

#elem {
	background-size: 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

ဥပမာ

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

<div id="elem"></div>

#elem {
	background-size: 400px auto;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

ဥပမာ

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

<div id="elem"></div>

#elem {
	background-size: auto 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

ဥပမာ . contain တန်ဖိုး

contain တန်ဖိုး၏ အလုပ်လုပ်ပုံကို ကြည့်ရှုပါ -

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

ဥပမာ . cover တန်ဖိုး

cover တန်ဖိုး၏ အလုပ်လုပ်ပုံကို ကြည့်ရှုပါ -

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

ဥပမာ . cover ၏အလုပ်လုပ်ပုံကို မြှင့်တင်ခြင်း

cover တန်ဖိုး၏ အလုပ်လုပ်ပုံကို မြှင့်တင်နိုင်သည်၊ background-position ဂုဏ်သတ္တိကို အသုံးပြု၍ ပုံကို ဗဟိုချိန်ညှိပေးခြင်းဖြင့် ဖြစ်သည် (ကျွန်ုပ်တို့၏ကိစ္စတွင် မြင်ရသောအပိုင်းများသည် မြင်းများ၏ဦးခေါင်းများကို စတင်ဖော်ပြမည်၊ ၎င်းတို့၏အနောက်ပိုင်းများကို မဟုတ်) -

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

ဤအကြောင်းကိုလည်း ကြည့်ရှုပါ

background ဂုဏ်သတ္တိ,
နောက်ခံအတွက် အတိုကောက်ဂုဏ်သတ္တိတစ်ခု ဖြစ်သည်