Ciri objectFit style

Definisi dan penggunaan

objectFit Ciri ini digunakan untuk menentukan bagaimana saiz <img> atau <video> harus disesuaikan untuk memenuhi bekasnya.

Ciri ini memberitahu kandungan untuk diisi dalam beberapa cara; contohnya "pertahankan nisbah lebar dan tinggi" atau "lengkapi sebanyak mungkin ruang".

Lihat juga:

Panduan CSS:CSS object-fit

Panduan CSS:Ciri object-fit

Contoh

Potong sisi imej, mempertahankan nisbah lebar dan tinggi, dan mengisi ruang:

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

Cuba sendiri

Sintaks

Balikkan ciri objectFit:

object.style.objectFit

Tetapkan ciri objectFit:

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

Nilai ciri

Nilai Penerangan
fill Lalai. Ubah saiz kandungan yang digantikan untuk memenuhi kotak kandungan elemen. Jika perlu, objek akan dijauhkan atau disangkut.
contain Skalakan kandungan yang digantikan untuk memastikan ia memenuhi kotak kandungan elemen, mempertahankan nisbah lebar dan tinggi.
cover Ubah saiz kandungan yang digantikan untuk memastikan ia diisi sepenuhnya di dalam kotak kandungan pengganti, mempertahankan nisbah lebar dan tinggi. Objek akan disangkut.
none Kandungan yang digantikan tidak akan diubah saiz.
scale-down Saiz kandungan dengan none atau contain yang sama, bergantung kepada mana yang mendapat saiz objek yang lebih kecil.
initial Tetapkan ciri ini kepada nilai lalai. Lihat initial.
inherit Mewarisi ciri ini dari elemen induk. Lihat inherit.

Perincian teknikal

Nilai lalai: fill
Hasil balik: String, menunjukkan saiz elemen Ciri object-fit.
Versi CSS: CSS3

Pendukung pelayar

Nombor di dalam jadual menunjukkan versi pelayar yang penuh untuk pertama kalinya mendukung ciri ini.

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