Atribut Style objectFit

Definisi dan penggunaan

objectFit Atribut digunakan untuk menentukan cara mengatur ukuran <img> atau <video> untuk memadai kotak kontennya.

Atribut ini mengatakan cara konten diisi dalam berbagai cara; contohnya "pertahankan rasio lebar-tinggi" atau "perpanjang dan sebagaimana mungkin mengisi ruang."

Lihat juga：

Panduan CSS：CSS object-fit

Panduan referensi CSS：Atribut object-fit

Contoh

Potong sisi gambar, pertahankan rasio lebar-tinggi, dan mengisi ruang:

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

Coba sendiri

Sintaks

Kembalikan atribut objectFit：

object.style.objectFit

Setel atribut objectFit：

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

Nilai atribut

Nilai Deskripsi
fill Standar. Atur ukuran konten yang digantikan untuk mengisi kotak konten elemen. Jika perlu, objek akan dijauhkan atau ditekan.
contain Skalakan konten yang digantikan untuk mempertahankan rasio lebar-tinggi, serta memadankan kotak konten elemen.
cover Atur ukuran konten yang digantikan untuk mempertahankan rasio lebar-tinggi saat mengisi kotak konten elemen penuh. Objek akan dipotong.
none Konten yang digantikan tidak akan diatur ukurannya.
scale-down Ukuran konten sama dengan none atau contain salah satu, tergantung yang mendapatkan ukuran objek yang lebih kecil antara keduanya.
initial Setel atribut ini ke nilai standarnya. Lihat initial。
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit。

Detil teknis

Nilai standar： fill
Nilai kembalian： String, yang menyatakan ukuran elemen Atribut object-fit。
Versi CSS： CSS3

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung atribut ini.

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