Mengubah ukuran gambar memang merupakan hal yang sangat mudah karena cukup dengan software image editor atau sedikit kode CSS ukuran gambar yang seharusnya besar dapat mengecil dengan sempurna, namun apabila ukuran gambar tersebut berbeda-beda namun kalian tidak ingin repot untuk membuka aplikasi software image editor saya mempunyai solusi untuk kalian yang bagi yang membutuhkan artikel ini.

Mengubah lebar dan panjang gambar memanglah bisa digunakan dengan kode width dan height namun kalian tidak dapat melakukan itu jika gambar yang kalian gunakan tidak mau terlihat gepeng, untuk itu kalian dapat menggunakan css overflow untuk memotong gambar agar sesuai dengan gambar lainnya.

Tapi apa itu CSS Overflow ?

Overflow sering digunakan dalam kode CSS yang berguna untuk menyembunyikan, menampakkan, atau membuat scroll. Fungsi ini bisa diterapkan dalam objek teks ataupun gambar. Pada objek tertentu, baik posting atau widget, kadang kadang ada yang memakan tempat ke pinggir atau ke bawah. Supaya objek tersebut muncul sesuai dengan yang kita kehendaki, maka digunakan syntax overrflow.

Tahap 1

Balik lagi ke point awal untuk mengubah ukuran lebar dan panjang kalian setidaknya harus mempunyai struktur HTML yang setidaknya seperti dibawah ini :

div akan digunakan sebagai tempat atau wadah untuk menempatkan gambar sekaligus memberikan ukuran atas gambar yang akan ditampilkan dan img digunakan untuk memasukkan gambar namun kalian dapat juga menggunakan gambar yang besar, akan tetapi penggunaan gambar yang terlalu besar tidak akan dapat memberikan tampilan yang optimal.

Tahap 2

Setelah sudah merangkai kode HTML seperti itu selanjutnya kalian dapat menyisipkan kode CSS dengan syntax overflow yang kurang lebih kodenya seperti ini :

.gambarkecil {
    overflow:hidden;
    width:200px;
    height:200px;
}
.gambarkecil img {
    width:100%;
    height:auto;
}

.gambarkecil img terdapat width 100% yang berguna untuk menyesuaikan lebar gambar dengan wadahnya, jadi jika widthnya 200px maka ukurannya akan persis seperti wadahnya yaitu 200px. height auto juga berguna untuk menyesuaikan gambar akan tidak gepeng jadi jika width asli adalah 100px dan height 200px maka jika disisipkan kode tersebut akan berubah menjadi width 200px dan height 400px.

Bagaimana apakah ini mudah atau susah ?

jika kalian ingin melihat contoh yang sudah jadi maka kalian dapat melihatnya di halaman beranda kolombaru.