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:

14 Mei 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat