object-fit untuk gambar dan video

Paksa media mengisi kotak tanpa rusak proporsinya.

Pahami konsepnya

Masalah klasik: gambar 4:3 dimasukkan ke kotak 16:9 — defaultnya digelek atau dimanjangkan. object-fit mengatur bagaimana elemen media (img, video, iframe berukuran) mengisi kotaknya. cover memenuhi seluruh kotak sambil menjaga proporsi asli, memotong kelebihan tepi — pilihan utama untuk thumbnail dan hero. contain memuat seluruh gambar utuh di dalam kotak, membiarkan ruang kosong di sisi yang tak terpakai — pas untuk logo dan diagram.

Nilai lain: fill memaksa pas penuh tanpa peduli proporsi (gelembung wajah dijamin), none menampilkan ukuran asli apa adanya, dan scale-down berperilaku seperti none atau contain mana yang lebih kecil. Pendampingnya object-position mengatur titik fokus pemotongan — object-position: top menjaga wajah di bagian atas saat cover memotong.

Bandingkan dengan background-image: properti background punya perilaku serupa lewat background-size: cover, tapi hanya untuk elemen dekoratif. Untuk gambar konten yang butuh alt dan makna semantik, img dengan object-fit adalah jalur yang benar — aksesibel sekaligus rapi.

Coba contoh kode

.thumbnail {
  width: 240px;
  height: 140px;
  object-fit: cover;            /* isi penuh, potong sisa */
  object-position: center top;  /* fokus di bagian atas */
}

.logo {
  width: 120px;
  height: 60px;
  object-fit: contain;          /* utuh, tak terpotong */
}

cover membuat seluruh grid thumbnail seragam rapi walau foto aslinya bermacam proporsi; object-position menyelamatkan wajah dari pemotongan. contain menjaga logo tetap utuh di slot persegi panjang — dua kata kunci, dua filosofi berlawanan yang sama-sama berguna.

Latihan singkat

Buat grid foto profil seragam 200×200 dengan cover + posisi atas, lalu baris logo mitra dengan contain.