Clip

Selain properti overflow ada satu properti lagi yang bisa digunakan untuk membatasi tampilan, tapi ini hanya dikhususkan untuk tag <img>. Properti tersebut adalah "clip".
<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>

Kode HTML di atas menghasilkan potongan yang sama dengan contoh kode sebelumnya walaupun letaknya berbeda. Abaikan saja properti-properti yang saya gunakan untuk saat ini. Intinya, tanpa properti clip, kode css dan html-nya akan jadi lebih panjang jika ingin hasilnya sama.
.