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 հատկությունը,
որը ֆոնի համար հապավում է հանդիսանում