Cara Memotong dan Menampilkan Bagian Tertentu dari Gambar Menggunakan CSS

Dalam pengembangan web, kita sering kali perlu menampilkan gambar dalam ukuran tertentu tanpa mengubah gambar asli. CSS menyediakan properti seperti object-fit dan object-position untuk mengatur cara gambar ditampilkan di dalam kontainer. Artikel ini akan membahas cara memotong gambar (crop) dan mengatur bagian mana dari gambar yang ingin ditampilkan.

---

🎯 Tujuan Utama

• Memahami cara kerja object-fit dan object-position
• Memotong gambar tanpa mengedit file gambar
• Fokus pada bagian atas, tengah, bawah, kiri, kanan, dan kombinasi lainnya dari gambar

---

1. object-fit: Mengatur Skala dan Pemotongan Gambar

Pengertian

object-fit mengatur bagaimana konten seperti <img>, <video>, atau <picture> menyesuaikan diri dalam sebuah kontainer.

Nilai yang Umum Digunakan:

Nilai	Deskripsi
fill	Default. Gambar akan direnggangkan agar mengisi kontainer (bisa menyebabkan distorsi).
contain	Gambar diubah ukurannya agar seluruhnya muat di dalam kontainer (tidak dipotong, tapi bisa ada ruang kosong).
cover	Gambar mengisi seluruh kontainer, tapi bagian luar yang tidak muat akan dipotong.
none	Gambar tidak akan diubah ukurannya.
scale-down	Mirip none atau contain, tergantung mana yang lebih kecil.

Contoh: object-fit: cover

<div>
  <img src="fotokamu.jpg" width="1200px" style="object-fit: cover; object-position: top"/>
</div>