CSS object-fit özelliği

Tanım ve kullanım

object-fit özelliği, <img> veya <video> elementlerinin boyutunu nasıl ayarlayacağını belirlemek için kullanılır, böylece kapancığı kapacak şekilde uyacak şekilde ayarlanır.

Bu özellik, içeriknin kapancığı nasıl doldurulacağını belirtir. Örneğin, 'Uzunluk ve genişlik oranını koru' veya 'Genişlemek ve mümkün olduğunca fazla alan kaplamak'.

Ayrıca bakınız:

CSS eğitimi:CSS object-fit

CSS referans el kitabı:CSS object-position

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

Örnek

Görüntü kenarlarını kesin, uzunluk ve genişlik oranını koruyun ve boşlukları doldurun:

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Kişisel olarak deneyin

CSS dilbilgisi

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Özellik değeri

Değer Açıklama
fill Varsayılan değer. Değiştirilen içeriğin boyutunu ayarlayın, böylece elementin içerik çerçevesini doldurur. Gerekirse, nesne çekilir veya sıkıştırılır.
contain Değiştirilen içeriği genişlik ve yükseklik oranını koruyarak çarpıtın, böylece elementin içerik çerçevesine uyacak şekilde ayarlanır.
cover Değiştirilen içeriğin boyutunu ayarlayın, böylece doldurma elementinin tüm içerik çerçevesini doldururken uzunluk ve genişlik oranını korur. Nesne kesilir.
none Değiştirilen içerik boyutlandırılmaz.
scale-down İçerik boyutları, none veya contain'dan birisiyle aynı olacaktır, bu iki arasındaki en küçük olanın nesne boyutlarına bağlı olacaktır.
initial Bu özelliği varsayılan değerine ayarlayın. Bakınız initial.
inherit Bu özelliği ebeveyn elementinden kalıtım alır. Bakınız inherit.

Teknik ayrıntılar

Varsayılan değer: Ayrı özelliklere bakınız.
Kalıtım: Hayır
Animasyon yapımı: Desteklenmiyor. Bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.objectFit="cover"

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 7.1 19.0