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 касиети,
бул фон үчүн кыскартылган касиет