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ğerler
| 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. |
Örnek
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;
}
:
Örnek
Ş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;
}
:
Örnek
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;
}
:
Örnek
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;
}
:
Ayrıca Bakınız
-
Bir öğenin en-boy oranını tanımlayan
aspect-ratioözelliği