თვისება object-fit

თვისება object-fit განსაზღვრავს ასპექტის შეფარდებას ან მასშტაბირებას ისეთი ელემენტების, როგორიცაა სურათი ან ვიდეო.

სინტაქსი

სელექტორი {
	object-fit: fill ან contain ან cover ან none;
}

ცხრილში წარმოდგენილია ძირითადი მნიშვნელობები თვისების object-fitთვის:

მნიშვნელობა	აღწერა
`fill`	ელემენტის მასშტაბირება მითითებულ ზომებთან შესაბამისობისთვის, ამ შემთხვევაში ელემენტის პროპორციები იგნორირებულია.
`contain`	ელემენტის მასშტაბირება მითითებულ ზომებთან შესაბამისობისთვის, ამ შემთხვევაში ელემენტის პროპორციები შენარჩუნებულია.
`cover`	ელემენტის ზომები იცვლება, რათა მთლიანად შეავსოს მითითებული არე, ამ შემთხვევაში თვითონ ელემენტის პროპორციები შენარჩუნებულია.
`none`	ელემენტის ორიგინალური ზომები შენარჩუნებულია.

მოდით, ჩვენს სურათს მივანიჭოთ მითითებული ზომის შევსება პროპორციების შენარჩუნების გარეშე:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: fill;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

ახლა კი მოდით, გავაკეთოთ ისე, რომ სურათმა შეავსოს მითითებული კონტეინერი პროპორციების შენარჩუნებით:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: contain;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

მოდით, ჩვენი სურათით შევავსოთ მითითებული კონტეინერი ისე, რომ თვითონ სურათის ზომა შეიცვალოს, მაგრამ ამასთანავე მისი პროპორციები შენარჩუნებული იყოს:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: cover;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

მოდით, უბრალოდ ჩავსვათ ჩვენი სურათი მითითებულ კონტეინერში მისი ორიგინალური ზომების შენარჩუნებით:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: none;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}