Menyesuaikan Ukuran Gambar / Fungsi IMG HTML

Menyesuaikan Ukuran Gambar

Untuk menyesuaikan ukuran gambar di HTML sangat mudah. Hanya menggunakan IMG Width / Height. Tapi untuk lebih jelasnya mari kita pelajari juga fungsi dari IMG di HTML.

Fungsi IMG pada HTML

Tag <img ... > pada HTML memiliki fungsi yang berkaitan dengan gambar. IMG berarti Image / Gambar. Beberapa fungsi yang digunakan dalam tag <img ... > adalah sebagai berikut :

<img src=" ... ">

Tag tersebut digunakan untuk menambahkan gambar dalam HTML.

Contoh :

<img src="Gambar (1).jpg"> artinya mencari Image / Gambar dengan nama "Gambar (1).jpg".

File "Gambar (1).jpg" ini masih berada satu folder local dengan file HTMLnya. Bagaimana kalau file gambarnya berasal dari folder lain? Nah, untuk itu kita perlu mengganti "Gambar (1).jpg" dengan link folder tempat meletakkan filenya.

Contoh :

"E:\Koleksi\Gambar (1).jpg" adalah lokasi dimana filenya berada. Jadi, meskipun filenya berada di folder lain tetap bisa diambil. Nah, bagaima kalo HTMLnya online dan filenya berada di internet?

Untuk itu kita ganti linknya seperti berikut :

Nah, "www.anjaymedia.com\blablabla.jpg" adalah link sebuah gambar di internet. Bagaimana cara mendapatkan link gambarnya?
Cukup mudah kok. Tinggal klik kanan gambar yang diinginkan, lalu klik pilihan Copy image address.

<img border=" ... ">

Tag tersebut digunakan untuk memberi Border pada gambar. Contohnya seperti ini :

Gambar tersebut masih belum diberi Border.

Mari kita tambahkan Bordernya.

Nah, border="5" artinya Border ditambahkan setebal 5 pixel.

Maka hasilnya akan seperti ini.

<img width=" ... " height=" ... ">

Tag ini digunakan untuk mengatur ukuran lebar gambar. Sangat mudah sekali caranya.

width="500px" artinya lebar gambar diatur menjadi 500 pixel.

Ada width harus ada juga height. Height adalah tinggi gambar.

Tinggi gambar diatur menjadi 350 pixel. Nah, hasilnya seperti ini :

Mudah bukan?

Sedikit Info

Pengaturan ukuran gambar menggunakan Width dan Height bertujuan untuk menyesuaikan ukuran gambar dengan layout di Website. Namun, terkadang gambar jadi tidak sesuai karena mengalami distorsi atau tidak proporsional. Maka dari itu, sebelum memasang gambar di Website sebaiknya edit dulu di Photoshop atau yang lainnya agar mudah disesuaikan.

Terima Kasih!

Apabila terdapat kesalahan silahkan memberi saran ataupun komentar.

Posted in: