თვისება 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,
რომელიც წარმოადგენს შემოკლებულ თვისებას ფონისთვის