Bir önceki yazımızda object-fit ile görselleri nasıl kırpıp boyutlandırabileceğimizden bahsetmiştir. object-position özelliği ile kırptığımız görsellerin kırpma konumlarını ayarlayabiliriz.
object-position özelliği, object-fit özelliği ile bağlantılı olarak kullanılır. Örneğin, bir video veya resim olarak bir eleman içeriği-kutu içinde, X / Y koordinatları ile nasıl konumlandığı belirler. Bu özellik, 0 10% veya 0 10px gibi iki sayısal değer alır. Bu örneklerde, ilk sayı görüntünün içerik kutusunun (0) soluna yerleştirilmesi gerektiğini, ikincisi ise üstten %10 veya 10px konumlandırılması gerektiğini belirtir. Negatif değerler kullanmak da mümkündür.
object-position özelliği için varsayılan değer olan 50% 50% kullanır. object-fit bu yüzden varsayılan olarak tüm görüntüleri içeriklerinin kutunun merkezinde konumlandırılmış olmasını sağlar:
img {
object-fit: none;
object-position: 50% 50%; /* default value: image is centered*/
object-position: 0 0; /* positioned top left of the content box */
}Aşağıda object-position, object-fit özellik ayarlı bir görüntünün nasıl işlenebileceğine dair birkaç örnek bulunmaktadır. Görüntünün içeriği herhangi bir nedenle içerik kutusunu doldurmazsa, doldurulmamış alan background-image, son örnekte olduğu gibi bir renk veya öğenin arka planını gösterecektir :
İlgili Özellikler
Diğer Kaynaklar
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7.1 + * | 36+ | 26+ | Hayır | 4.4.4+ | 8.4 + * |
* object-fit destekleniyor ama object-position desteklenmiyor.