Sifa background-size

Sifa background-size huweka ukubwa wa picha ya usuli. Thamani ya sifa ni vyovyote vipimo vya ukubwa, au maneno muhimu auto, cover au contain.

Kisarufu

kichaguzi {
	background-size: thamani;
}

Maneno Muhimu

Thamani	Maelezo
`auto`	Usuli utakuwa na ukubwa wa asili, kama ukubwa halisi wa picha ya usuli. Ikiwa `auto` imepewa kwa upande mmoja tu, basi upande huo usuli utaongeza ukubwa kiasi, ili kuwa na uwiano usiyopotoka.
`cover`	Huongeza ukubwa wa picha ili kufunika kipengele kizima huku ukihifadhi uwiano. Picha itajitahidi kutoshea kikamilifu, lakini hii haitawezekana kila mara, kwa hivyo sehemu fulani yake itakatwa. Kipengele kitafunikwa na picha kikamilifu kila mara.
`contain`	Huongeza ukubwa wa picha ili kutoshea ndani ya kipengele kikamilifu huku ukihifadhi uwiano. Wakati huo inaweza kuchukua upana wote, au urefu wote (inategemea uwiano wa picha na vipimo vya kipengele). Kwa ujumla kipengele kitafunikwa na picha si kikamilifu (lakini picha yote itaonekana kila mara, ingawa kwa ukubwa mdogo).

Thamani chaguomsingi: auto.

Matumizi

Vipimo vya ukubwa na auto vinaweza kutumiwa katika mchanganyiko mbalimbali, kwa mfano, hivi: auto 20px, au 30% 20px, au auto 30% na kadhalika. Katika kesi hii, kigezo cha kwanza huweka ukubwa wa usuli kwa upana, na kigezo cha pili - ukubwa wa usuli kwa urefu. Ikiwa kigezo kimoja kimetajwa - basi hicho kitaweka ukubwa wa usuli kwa upana, na kwa urefu wakati huo huo.

Mfano

Sasa picha ya usuli itakuwa na ukubwa wake wa asili:

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

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

Mfano

Sasa picha ya usuli itakuwa na ukubwa 300px kwa 400px (kwa kesi yetu uwiano wa picha utipotoka):

<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;
}

Mfano

Sasa picha ya usuli itakuwa na ukubwa 400px kwa 400px (kwa kesi yetu uwiano wa picha utipotoka):

<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;
}

Mfano

Sasa picha ya usuli itakuwa na ukubwa 400px kwa usawa, na kwa wima ukubwa wake utarekebishwa ili uwiano usipotoke:

<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;
}

Mfano

Sasa picha ya usuli itakuwa na ukubwa 400px kwa wima, na kwa usawa ukubwa wake utarekebishwa ili uwiano usipotoke:

<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;
}

Mfano . Thamani contain

Angalia utendaji wa thamani 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;
}

Mfano . Thamani cover

Angalia utendaji wa thamani 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;
}

Mfano . Kuboresha utendaji wa cover

Utendaji wa thamani cover unaweza kuboreshwa, kwa kuweka picha katikati kwa kutumia sifa background-position (kwa kesi yetu kwenye sehemu zinazoonekana zitaanza kujitokeza vichwa vya farasi, na si matako yao):

<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;
}

Angalia Pia

sifa background,
inayowakilisha sifa iliyofupishwa kwa usuli