{{ title }}

{{ message }}

{{ title }}

{{ message }}

{{ message }}

Trik Cropping Image Hanya Dengan CSS

04/04/2017 | HTML/CSS
Trik Cropping Image Hanya Dengan CSS

Membatasi lebar dan tinggi dari suatu image/gambar sangat diperlukan dalam satu kasus tertentu, agar layout web yg kita buat jadi tidak rusak. Ada banyak cara untuk membatas lebar dan tinggi dari suatu image, tapi tetap terlihat rapih. Salah satunya adalah dengan memotong (crop) image tersebut. Namun kebutuhan web yg dinamis membuat kita susah mengatur agar pengguna dari website tidak memasukan image yg lebar dan tingginya sesuai.

Anda bisa bayangkan jika hanya layout awal dari website mungkin Anda bisa memotong sendiri gambar tersebut menggunakan Photoshop atau tools lainnya. Akan tetapi jika website tersebut sudah aktif di publish dan website yg Anda publish adalah dinamis. Banyak kemungkinan pengguna umum website yg berpartisipasi mengisi konten website Anda memasukan image yg lebar dan tingginya tidak sesuai dan akan merusak layout web Anda.

Oleh karena itu kali ini saya akan menjelaskan cara untuk memotong gambar secara otomatis melalui sedikit kode CSS. Jadi jika pengguna website Anda memasukan gambar yg tidak sesuai ukuran maka secara otomatis gambar tersebut akan di crop.

Triknya sangat mudah, ini bisa kita umpamakan seperti Anda memasukan foto ke dalam bingkai fotonya. Dimana bingkai fotonya sudah dibatasi lebar dan tingginya, jadi ketika foto yg lebih besar dari bingkai dimasukan ke bingkainya maka hanya tampilan foto sebatas lebar dan tinggi bingkailah yg akan tampil. Untuk menampilkan bagian/posisi foto yg diinginkan kita cukup menggeser letak foto di dalam bingkai tersebut.

Preview di Codepen

Source Code Penjelasan

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Crop Image</title>
 
    <style>
        #frame-image {
            /* 
            CSS Untuk croping image 
            
            Disini Anda dapat menentukan lebar dan tinggi image
            */
            width: 160px;
            height: 160px;
            overflow: hidden;
            
            /* 
            CSS Untuk mengatur posisi image 
            Menjadikan frame sebagai patokan koordinat left/top
            */
            position: relative;
        }
        
        #frame-image img {
            /*
            CSS Untuk croping image
            Membatasi tinggi image, membiarkan width-nya auto
            Bisa juga diganti jadi height: 320px kalau tinggi image mau dipaksa jadi 320px
            */
            max-height: 320px;
            
            /* 
            CSS Untuk mengatur posisi image 
            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;
        }
    </style>
</head>
 
<body>
 
    <h1>Gambar Hasil Crop;</h1>
    <div id="frame-image">
        <img src="http://qaiserlab.com/wp-content/uploads/2016/07/html-css-js.png">
    </div>
 
    <h1>Gambar Asli;</h1>
    <img src="http://qaiserlab.com/wp-content/uploads/2016/07/html-css-js.png">
 
</body>
 
</html>

 

Category

Tag