<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
img{
position : absolute;
clip : rect(50px, 100px, 180px, 20px);
}
</style>
</HEAD>
<BODY>
<h2>Judul</h2>
<img src="gambarku.jpeg"/>
</BODY>
</HTML>
Sebelum membuka filenya di browser pastikan agar gambar dengan nama "gambarku.jpeg" ada di folder yang sama dengan tempat menyimpan kode HTML tersebut.
Satu hal yang perlu diperhatikan saat menggunakan properti clip adalah properti position yang harus ada dan bernilai absolute. Selain itu, urutan penulisan nilai untuk properti clip dalam fungsi rect adalah searah jarum jam memutar dari potongan koordinat sisi atas (y), kanan (x), bawah (y), dan berakhir dengan koordinat sisi kiri (x).
Untuk sementara abaikan saja kegunaan dari properti position karena kita akan membahasnya pada tulisan saya yang lain setelah ini.
Memotong Gambar Tanpa Menggunakan Properti clip.
Selain menggunakan properti clip kalian bisa juga menggunakan cara lain untuk memotong gambar, salah satunya dengan menggunakan properti overflow bernilai hidden. Selain itu, kalian perlu properti width, height, left, right, dll.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
.kontainer{
overflow : hidden;
width : 80px;
height : 130px;
background : yellow;
position : relative;
}
img {
width : auto;
height : auto;
position : absolute;
left : -20px;
top : -50px;
}
</style>
</HEAD>
<BODY>
<h2>Judul</h2>
<div class="kontainer">
<img src="gambarku.jpeg" />
</div>
</BODY>
</HTML>