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