Crop Gambar Dengan CSS

Berikut tips cepat bagaimana cara untuk memotong gambar dengan CSS. Teknik ini akan sangat berguna ketika membangun website untuk klien namun anda tidak memiliki editor Photoshop. Untuk melalakukan crop gambar idealnya kamu mesti mengeditnya dulu dengan foto editor sebelum diupload di website.

Cara dari teknik ini adalah dengan membungkus gambar yang ingin ditampilkan dalam div container, dimana kita akan berikan tinggi dan lebar tertentu. Kemudian berikan gambar width 100% jika dalam kasusnya, pengguna menggunakan gambar yang terlalu kecil.

Kunci trik ini akan berhasil adalah dengan adanya property overflow: hidden;. Property ini mencegah setiap gambar yang lebih besar akan keluar dari area div container. Menambahkan width: 100 %; dibutuhkan ketika kita memakai gambar yang lebih kecil dari ukuaran yang akan di-croping.

HTML Kode:

CSS Kode: