object-fit Özelliği

object-fit özelliği, resim veya video gibi öğelerin en-boy oranını veya ölçeklendirmesini belirler.

Sözdizimi

seçici {
	object-fit: fill veya contain veya cover veya none;
}

Aşağıdaki tabloda object-fit özelliği için temel değerler gösterilmektedir:

Değer	Açıklama
`fill`	Öğenin, belirtilen boyutlara uyması için ölçeklendirilmesi, bu sırada öğenin oranları göz ardı edilir.
`contain`	Öğenin, belirtilen boyutlara uyması için ölçeklendirilmesi, bu sırada öğenin oranları korunur.
`cover`	Öğenin boyutları, belirtilen alanı tamamen dolduracak şekilde değiştirilir, bu sırada öğenin kendi oranları korunur.
`none`	Öğenin orijinal boyutları korunur.

Resmimizin, oranları korumadan belirtilen boyutu doldurmasını sağlayalım:

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

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

Şimdi de resmin, oranları koruyarak belirtilen konteynırı doldurmasını sağlayalım:

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

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

Resmimizin, kendi oranları korunacak şekilde boyutunun değişerek belirtilen konteynırı tamamen doldurmasını sağlayalım:

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

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

Resmimizi, orijinal boyutları korunarak belirtilen konteynıra yerleştirelim:

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

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