Cara crop gambar dengan CSS akan menjadi topik menarik kita kali ini, karena dengan cara ini kita bisa mengatur ukuran gambar atau foto sesuai dengan desain website agar terlihat proporsional.
Biasanya banyak orang melakukan cropping gambar dengan menggunakan PHP. Para programmer tentu sudah sangat paham dengan hal ini. Pada saat upload gambar, biasanya sistem website tersebut akan memotong gambar menjadi beberapa ukuran sesuai dengan kebutuhan website. Begitu dari sisi pekerjaan programmernya.

crop (image: breathingcolor.com)
Namun ada kalanya seorang desainer tidak dapat berkomunikasi dengan baik dengan programmer PHP tersebut dengan alasan tertentu, bisa karena sibuk atau programmernya sudah pergi meninggalkan website tersebut. Hal lain yang mungkin adalah seorang desainer diminta untuk mendesain ulang sebuah website yang sistemnya sudah dibuat terlebih dahulu, jadi agak sulit untuk meminta sang programmer untuk mengubah ukuran gambar, oleh sebab itu terpaksa Anda hanya bisa mengupayakan crop gambar untuk kebutuhan desain dengan memanfaatkan CSS.
Beberapa keuntungan crop gambar dengan CSS
- Ketika tidak bisa berkomunikasi dengan programmer untuk meminta ukuran gambar tertentu untuk desian, maka memotong atau crop gambar dengan CSS adalah solusi
- Tidak perlu bersusah payah memotong gambar dengan Photoshop untuk mendapatkan ukuran tertentu pada desain website.
- Bisa membuat desain website menjadi lebih rapih karena gambar tidak melebihi ukuran atau tempat yang tersedia pada halaman website.
- Biasanya akan sangat berguna untuk membuat gambar thumbnail.
Kerugian
Gambar tidak benar-benar di crop, jadi besar file gambar tetap sama, hanya ukurannya saya yang akan terlihat bagus di halaman website. Oleh sebab itu ada kemungkinan ini sedikit memberatkan website.
Saran
Gunakan cara ini jika memang terpaksa karena tidak bisa minta pertolongan sang programmer untuk melakukan crop melalui sistem, maka ini solusi yang cukup bagus untuk sang desainer web agar desainnya tidak berantakan.
Cara Crop Gambar dengan CSS
Pada contoh kali ini kita membutuhkan sebuah gambar Spider-man, bisa diambil disini.

spiderman (Image: comicplanetcultureforlife.com)
Gambar tersebut nantinya akan kita coba crop pada halaman website sesuai dengan ukuran yang kita inginkan agar tetap terlihat proporsional.
Buat Struktur HTML
Untuk cropping gambar kita membutuhkan sebuah #ID tertentu yang berfungsi sebagai bingkai dari gambar tersebut, bingkai tersebut dibuat dengan ukuran tertentu agar nantinya gambar akan menyesuaikan bingkai tersebut.
Kode CSS untuk crop gambar
Inilah bagian yang paling penting untuk melalukan crop yaitu dengan CSS, tuliskan script dibawah ini pada CSS, script tersebut berguna untuk mengatur ukuran bingkai gambar, lalu membuat gambar yang ada didalamnya mengikuti ukuran bingkainya, dengan adanya overflow:hidden maka bagian gambar yang tidak sesuai dengan ukuran bingkai tidak akan terlihat, jadi akan terlihat seperti di crop.
Demo dan download script
Jika Anda tertarik untuk menggunakan cara ini pada website Anda, bisa lihat demo atau download scriptnya disini, semoga berguna :)
Comments