Properti object-fit CSS

Definisi dan penggunaan

Atribut objectFit digunakan untuk menentukan cara pengaturan ukuran <img> atau <video> untuk sesuai dengan kontainernya.

Atribut ini mengatakan cara pengisian konten ke dalam kontainer. Contohnya 'pertahankan aspek rasio' atau 'perluas dan pengambil ruang yang paling banyak yang mungkin'.

Lihat juga:

Panduan CSS:CSS object-fit

Panduan CSS:CSS object-position

Panduan HTML DOM:Atribut objectFit

Contoh

Potong bagian sisi gambar, pertahankan aspek rasio, dan lapis ruang:

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

Coba sendiri

Syntaxa CSS

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

Nilai atribut

Nilai Deskripsi
fill Nilai default. Atur ukuran konten yang digantikan untuk memenuhi kotak konten elemen. Jika diperlukan, objek akan ditarik atau ditekan.
contain Skalakan konten yang digantikan untuk mempertahankan aspek rasio, sambil mematuhi kotak konten elemen.
cover Atur ukuran konten yang digantikan untuk memenuhi seluruh kotak konten elemen pengganti, sambil mempertahankan aspek rasio. 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.
initial Atur atribut ini ke nilai default. Lihat: initial.
inherit Mewarisi atribut ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai default: Lihat atribut yang terpisah.
Mewarisi: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Syntaxa JavaScript: object.style.objectFit="cover"

Dukungan browser

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

IE / Edge Firefox Safari Opera Tentang CodeW3C.com
31.0 16.0 36.0 7.1 19.0