Cropping Gambar Menggunakan CSS
Di panduan kali ini kamu akan belajar bagaimana caranya mengcroping sebuah gambar dengan bantuan Css.
Bagi mengcroping gambar biasanya kita menggunakan program atau tools yang lainya seprti potoshop , paint atau program editing lainya. Nah kali ini saya akan menunjukan bagaimana seorang desiger web dapat mengerjakan croping gambar tanpa menggunakan bantuan program, 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 Bagi croping gambar / image
Disini Kamu dapat menentukan lebar dan tinggi image
*/
width: 180px;
height: 180px;
overflow: hidden;
/*
CSS Bagi mengatur posisi gambar
Menjadikan frame / bingkai selaku patokan koordinat left/top
*/
position: relative;
}
#frame-image img {
/*
CSS Bagi croping gambar
Membatasi tinggi gambar, membiarkan width-nya auto
Dapat pun diganti jadi height: 320px seandainya tinggi gambar mau dipaksakan jadi 320px
*/
max-height: 320px;
/*
CSS Bagi mengatur posisi gambar
Left/top berpatokan di frame
Diisi dengan nilai minus bagi memposisikan keluar dari frame
karena frame overflow-nya dikerjakan jadi hidden
posisi yg keluar area frame jadi tak terlihat
Disini Kamu 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 sesungguhnya</h1>
<img src=http://www.comicplanetcultureforlife.com/wp-content/uploads/2015/07/5330843ce3c7f.jpg>
</body>
</html>
seandainya kalian jalankan di browsernya karenanya hasilnya akan seprti ini :
oke lumayan demikianlah dari saya. 🙂
Sumber https://kursuswebsite.org
