Savybė background-size

Savybė background-size nustato fono paveikslėlio dydį. Savybės reikšmė gali būti bet kokie dydžio vienetai, arba raktažodžiai auto, cover arba contain.

Sintaksė

selektorius {
	background-size: reikšmė;
}

Raktažodžiai

Reikšmė	Aprašas
`auto`	Fonas turės natūralų dydį, tokį, kokį turi tikrasis fono paveikslėlio dydis. Jei `auto` nurodyta tik vienai pusei, tai išilgai tos pusės fonas bus keičiamas taip, kad išlaikytų neiškraipytas proporcijas.
`cover`	Keičia paveikslėlio mastelį taip, kad jis padengtų visą bloką išlaikant proporcijas. Paveikslėlis stengsis tilpti visas, bet tai ne visada pavyksta, todėl kuri nors jo dalis bus nukirpta. Blokas visada bus visiškai padengtas paveikslėliu.
`contain`	Keičia paveikslėlio mastelį taip, kad jis visiškai tilptų į bloką išlaikant proporcijas. Tuo pačiu jis gali užimti arba visą plotį, arba visą aukštį (priklauso nuo paveikslėlio proporcijų ir elemento dydžių). Apskritai blokas bus padengtas paveikslėliu ne visiškai (tačiau paveikslėlis visada bus matomas visas, nors ir sumažintas variante).

Numatytoji reikšmė: auto.

Naudojimas

Dydžio vienetai ir auto gali būti naudojami įvairiose kombinacijose, pavyzdžiui, taip: auto 20px, arba 30% 20px, arba auto 30% ir pan. Šiuo atveju pirmasis parametras nustato fono dydį pagal plotį, o antrasis parametras - fono dydį pagal aukštį. Jei nurodytas vienas parametras - jis nustatys fono dydį ir pagal plotį, ir pagal aukštį vienu metu.

Pavyzdys

Dabar fono paveikslėlis turės savo natūralų dydį:

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

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

Pavyzdys

Dabar fono paveikslėlio dydis bus 300px į 400px (mūsų atveju paveikslėlio proporcijos bus iškraipytos):

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

Pavyzdys

Dabar fono paveikslėlio dydis bus 400px į 400px (mūsų atveju paveikslėlio proporcijos bus iškraipytos):

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

Pavyzdys

Dabar fono paveikslėlio dydis bus 400px horizontaliai, o vertikaliai jo dydis prisitaikys taip, kad proporcijos nebūtų iškraipytos:

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

Pavyzdys

Dabar fono paveikslėlio dydis bus 400px vertikaliai, o horizontaliai jo dydis prisitaikys taip, kad proporcijos nebūtų iškraipytos:

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

Pavyzdys . Reikšmė contain

Pažiūrėkite, kaip veikia reikšmė 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;
}

Pavyzdys . Reikšmė cover

Pažiūrėkite, kaip veikia reikšmė 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;
}

Pavyzdys . Pageriname cover veikimą

Reikšmės cover veikimą galima pagerinti, jei centruojame paveikslėlį naudodami savybę background-position (mūsų atveju į matomas dalis pradės patekti arklių galvos, o ne jų užpakaliai):

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

Taip pat žiūrėkite

savybė background,
kuri yra sutrumpinta fonui skirta savybė