CSS AdvancedLesson 67Preview gratis
CSS object-fit
Lesson ini bagian dari CSS · Semua level
Ringkasan
`object-fit` mengatur bagaimana isi elemen berukuran tetap, seperti `<img>` atau `<video>`, menyesuaikan kotaknya. Nilai `cover` meregangkan gambar sampai menutupi kotak dan memotong tepinya, sedangkan `contain` mempertahankan seluruh isi gambar dengan sisa ruang kosong. Fitur ini sangat membantu saat membuat kartu foto dengan ukuran seragam.
Poin kunci
- Properti ini berlaku pada elemen dengan kotak acuan jelas seperti `<img>` dengan `width`/`height`
- `fill` (default) meregangkan gambar mengabaikan rasio aspek
- `cover` menutupi kotak, tepi gambar bisa terpotong
- `contain` menampilkan seluruh isi gambar, bisa menyisakan ruang kosong
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.