Pernah upload foto profil di Instagram terus wajah kamu ke-crop aneh? Itu hasil object-fit yang gak diatur dengan tepat. Pas kamu kasih ukuran tetap ke <img> (misal kotak 200×200), tapi foto aslinya 4000×3000 — ada masalah: gambar harus dipress, dipotong, atau diciutin. object-fit ngasih kontrol gimana foto ngepasin dirinya: cover (penuhin kotak, bagian lebih dipotong), contain (muat seluruh foto, ada ruang kosong), fill (paksa stretch, bisa distorsi).

🤔 Tip foto wajah. Default object-fit: cover crop dari TENGAH. Foto wajah yang head-and-shoulder sering kepotong jidat atau dagu. Solusinya: object-position: top — fokus crop ke atas, wajah pasti aman.

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

Nilai yang tersedia:

• fill (default) — gambar diregangkan untuk mengisi container, bisa terdistorsi
• contain — gambar diperkecil agar muat seluruhnya, mungkin ada ruang kosong
• cover — gambar diperbesar agar menutupi seluruh container, bagian yang kelebihan dipotong
• none — gambar ditampilkan ukuran asli, bisa terpotong
• scale-down — pilih yang lebih kecil antara none dan contain

Gunakan object-position untuk mengatur posisi gambar di dalam container:

img {
  object-fit: cover;
  object-position: top center; /* fokus ke bagian atas */
}

🎭 Analogi sehari-hari

object-fit = rules tukang foto cetak studio pas kamu bawa foto kebesaran ke bingkai. Mau dipotong simetris (cover, default Instagram), dikecilin biar muat utuh + ada border putih (contain, kayak foto rapor), atau distretch paksa? Pilih sesuai konten — wajah orang TINGGAL pakai cover + position top, foto produk e-commerce biasanya contain biar kelihatan utuh.

⚠️ Jebakan yang sering ditemui

• object-fit cuma untuk replaced element (<img>, <video>, <iframe>). Tidak jalan di <div> dengan background-image.
• Tanpa width/height set di img, object-fit tidak ada efek — butuh container size definite.
• object-fit: cover crop dari TENGAH default. Pakai object-position untuk geser fokus.
• object-position syntax: top, center, bottom, left, right, atau % %, atau px px.
• Background image padanan: background-size: cover/contain + background-position. Beda use case.
• Foto wajah perlu object-position: top atau top center — supaya wajah tidak ketebak default center crop.

TL;DR: object-fit ngatur cara <img>/<video> ngepasin container yang ukuran tetap. cover (penuhin, crop bagian lebih — Instagram default), contain (muat utuh, ada empty space — foto rapor), fill (paksa stretch, distorsi). object-position geser fokus crop (top center buat foto wajah). Cuma jalan di replaced element (img/video/iframe), butuh width+height definite. Buat <div> background-image: pakai background-size: cover/contain.