Pada tutorial kali ini anda akan belajar bagaimana caranya mengcroping sebuah gambar dengan bantuan Css.
Untuk mengcroping gambar biasanya kita menggunakan aplikasi atau tools yang lainya seprti potoshop , paint atau aplikasi editing lainya. Nah kali ini saya akan menunjukan bagaimana seorang desiger web dapat melakukan croping gambar tanpa menggunakan bantuan aplikasi, tools editing lainya, kita hanya menggunakan CSS.
salin code berikut :
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
#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;
}
</style>
</head>
<body>
<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">
</body>
</html>
jika kalian jalankan pada browsernya maka hasilnya akan seprti ini :
oke cukup sekian dari saya. 🙂