object-fit Özelliği

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

Sözdizimi

cssseç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:

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

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

Результат:

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

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

cssimg {
  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:

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

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

Результат:

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

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

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

Результат: