Style objectFit özelliği

Tanım ve kullanım

objectFit Özellik, <img> veya <video> elemanlarının boyutlarını kapısına nasıl uyacak şekilde ayarlamayı tanımlar.

Bu özellik, içeriğin kapları nasıl dolduracağını çeşitli şekillerde belirtir; örneğin, "Oransal boyutları koru" veya "Genişlemek ve mümkün olduğunca fazla alan kaplamak".

Ayrıca bkz.:

CSS eğitimi：CSS object-fit

CSS referans el kitabı：object-fit özelliği

Örnek

Görselin yanlarını kesin, oransal boyutları koruyun ve alanı doldurun：

document.getElementById("myImg").style.objectFit = "cover";

Kişisel olarak deneyin

Sözdizimi

objectFit özelliğini döndürür：

object.style.objectFit

objectFit özelliğini ayarla：

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

Özellik değeri

Değer Açıklama
fill Varsayılan. Değiştirilen içerik boyutlandırılır, elemanın içerik çerçevesini doldurmak için gerektiğinde nesne genişletilir veya sıkıştırılır.
contain Değiştirilen içerik, genişlik ve yükseklik oranını korurken, elemanın içerik çerçevesine uyacak şekilde ölçeklendirilir.
cover Değiştirilen içerik boyutlandırılır, dolayısıyla doldurma elemanının tüm içerik çerçevesini doldururken oransal boyutlarını korur. Nesne kesilir.
none Değiştirilen içerik boyutlandırılmaz.
scale-down İçerik boyutları, none veya contain'dan biriyle aynıdır, ikisinin arasındaki en küçük nesne boyutuna bağlıdır.
initial Bu özelliği varsayılan değerine ayarlar. bkz. initial。
inherit Bu özelliği ebeveyn elemanından miras alır. bkz. inherit。

Teknik ayrıntılar

Varsayılan değer： fill
Dönüş değeri： Dizge, elemanın object-fit özelliği。
CSS sürümü： CSS3

Tarayıcı desteği

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0