Cara Crop Gambar dengan CSS

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.

<h1>Gambar Spiderman Setelah di Crop</h1>
<div id="frame-image">
    <img src="http://www.comicplanetcultureforlife.com/wp-content/uploads/2015/07/5330843ce3c7f.jpg">
</div>

<h1>Gambar Spiderman ukuran sebenarnya</h1>
<img src="http://www.comicplanetcultureforlife.com/wp-content/uploads/2015/07/5330843ce3c7f.jpg">

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.

#frame-image {
    /* 
    CSS Untuk croping gambar / foto 

    Disini Anda dapat menentukan lebar dan tinggi image
    */
    width: 180px;
    height: 180px;
    overflow: hidden;

    /* 
    CSS Untuk mengatur posisi gambar 
    Menjadikan frame / bingkai sebagai patokan koordinat left/top
    */
    position: relative;
}

#frame-image img {
    /*
    CSS Untuk croping gambar
    Membatasi tinggi gambar, membiarkan width-nya auto
    Bisa juga diganti jadi height: 320px jika tinggi gambar mau dipaksakan jadi 320px
    */
    max-height: 320px;

    /* 
    CSS Untuk mengatur posisi gambar 
    Left/top berpatokan pada frame
    Diisi dengan nilai minus untuk memposisikan keluar dari frame
    karena frame overflow-nya dibuat jadi hidden
    posisi yg keluar area frame jadi tidak terlihat

    Disini Anda dapat mengatur bagian/posisi gambar yg mana yg akan ditampilkan
    */
    position: absolute;
    left: -10px;
    top: -86px;
}

Demo dan download script

Jika Anda tertarik untuk menggunakan cara ini pada website Anda, bisa lihat demo atau download scriptnya disini, semoga berguna :)