Cara Mengatur Ukuran Gambar Di HTML

Cara Mengatur Ukuran Gambar Di HTML

Pada tutorial ini kita akan belajar cara mengatur ukuran gambar di HTML. Untuk mengatur ukuran gambar dengan html caranya cukup mudah, kamu hanya memerlukan atribut width dan height. Atribut tersebut tentunya digunakan dalam tag image yang ingin diatur ukurannya. Misalnya seperti ini :

Pada contoh kode diatas kita mengatur gambar dengan ukuran lebar (width) sebesar 300px, dan tinggi (height) sebesar 400px. Namun sebelum memasukkan nilai dari atribut width dan height kamu tentunya harus sudah mengetahui ukuran lebar dan tinggi dari gambar yang ingin diatur. Dan kamu bisa memasukkan nilai sebanding dari sisi lebar dan tinggi dari gambar tersebut. Agar gambar yang tampil tetap proporsional. Apabila kamu menggunakan nilai width dan height secara sembarangan maka kemungkinan besar gambar yang tampil tidak proporsional. Misalnya seperti contoh gambar ini :

Contoh Gambar Tidak Proporsional

Pada contoh gambar diatas jelas terlihat gambarnya tampil tidak proporsional, yaitu gambar seperti ditarik keatas.

Sekarang kita akan menentukan nilai agar gambar tampak proporsional, cara mendapatkan nilai ini menggunakan aplikasi Photoshop, apa bila kamu memiliki ide yang lebih gampang bisa sharing di kolom komentar dibawah. Dan caranya sebagai berikut.

Buka aplikasi Photoshop, kemudian buka gambar dan setelah gambar terbuka pilih Image > Image Size. Kemudian masukkan ukuran width yang kamu inginkan, maka nilai height akan menyesuaikan.

Gambar Contoh Menentukan Ukuran Gambar di Photoshop

Dari gambar diatas maka saya mengatur width dengan nilai 350px, dan mendapatkan nilai heght 197px. Selanjutnya saya menggunakan nilai tersebut untuk mengganti nilai atribut dari contoh gambar yang saya tampilkan sebelumnya yang tampilannya tidak proporsional, maka kodenya menjadi seperti ini :

Dan dari kode diatas hasilnya seperti ini :

Gambar Hasil Contoh Kode Cara Mengatur Ukuran Gambar Di HTML - 1

Sekarang hasilnya tampak proporsional, jika dibandingkan dengan sebelumnya.

Dari menentukan gambar diatas menurut saya agak ribet, namun saya biasanya saat ingin mengatur ukuran gambar di HTML saya hanya menggunakan salah satu atribut width atau height saja. Misalnya saya menggunakan atribut width=”500px” maka gambar yang tampil akan memiliki lebar sebesar 500px, dan tingginya akan mengikuti dan gambar akan tampil proporsional. Misalnya seperti contoh kode seperti ini :

Dari kode diatas maka akan tampil gambar yang memiliki lebar 500px, dan tinggi mengikuti gambar supaya tampil proporsional. Dan dari kode diatas akan tampil seperti ini :

Gambar Hasil Contoh Kode Cara Mengatur Ukuran Gambar Di HTML - 2

Demikian untuk tutorial cara mengatur ukuran gambar di HTML, apabila kamu memiliki pertanyaan seputar tutorial ini silakan tanyakan pada kolom komentar dibawah. Dan apabila kamu baru berkunjung di webisite ini, silakan kunjungi seri belajar HTML dasar yang mungkin bisa menambah wawasan kamu seputar HTML.


Kolom Komentar

Related Post