Kategoriler
CSS

object-position: CSS ile Boyutlandırılmış Resimleri Konumlandırma

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

KromSafariFirefoxOperaIEAndroidiOS
31+7.1 + *36+26+Hayır4.4.4+8.4 + *

* object-fit destekleniyor ama object-position desteklenmiyor.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.