CSS object-position özelliği

Tanım ve kullanım

object-position özelliği, x/y koordinatlarını, <img> veya <video> içinde 'kendi içerik çerçevesi'nde nasıl kullanılacağını belirlemek için object-fit ile birlikte kullanılır.

Ayrıca bakınız:

CSS eğitim:CSS object-fit

CSS referans el kitabı:CSS object-position

HTML DOM referans el kitabı:objectPosition özelliği

Örnek

Görselin boyutunu içerik çerçevesine uyacak şekilde ayarlayın ve görseli içerik çerçevesi içinde sol kenarda 5px, üstte 10% olarak hareket ettirin:

img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px solid red;
}

Kişisel olarak deneyin

CSS dilbilgisi

object-position: konum|initial|inherit;

Özellik değeri

Değer Açıklama
konum

Görsel veya videoyun içerik çerçevesindeki konumunu belirler.

İlk değer x eksenini, ikinci değer y eksenini kontrol eder.

Dizge (sol, ortada veya sağ) veya rakam (px veya % olarak) olabilir. Negatif değerlere izin verilir.
initial Bu özelliği varsayılan değerine ayarlar. Bakınız initial.
inherit Bu özelliği, ebeveyn elementinden devralır. Bakınız inherit.

Teknik ayrıntılar

Varsayılan değer: 50% 50%
Devralma: evet
Animasyon yapımı: Destekleniyor. Bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.objectPosition="0 10%"

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 10.0 19.0