Properti kesesuaian objek CSS
Contoh
Potong sisi gambar, pertahankan rasio aspek, dan isi ruang:
img.a {
width: 200px;
height:
400px;
object-fit: cover;
}
Definisi dan Penggunaan
Properti object-fit
ini digunakan untuk menentukan bagaimana <img> atau <video> harus diubah ukurannya agar sesuai dengan wadahnya.
Properti ini memberi tahu konten untuk mengisi wadah dengan berbagai cara; seperti "pertahankan rasio aspek itu" atau "regangkan dan gunakan ruang sebanyak mungkin".
Nilai bawaan: | lihat properti individu |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.objectFit="penutup" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Sintaks CSS
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
Nilai properti
Value | Description | Try it |
---|---|---|
fill | This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit | |
contain | The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box | |
cover | The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit | |
none | The replaced content is not resized | |
scale-down | The content is sized as if none or contain were specified (would result in a smaller concrete object size) | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Halaman Terkait
Tutorial CSS: Kesesuaian objek CSS
Referensi CSS: Posisi objek CSS
Referensi DOM HTML: Properti objectFit