CARA MENGECILKAN GAMBAR DI HTML

Kamu sedang belajar HTML dan ingin tahu bagaimana cara mengecilkan gambar? Kamu berada di tempat yang tepat. Artikel ini akan memberi kamu panduan langkah-demi-langkah bagaimana cara mengecilkan gambar di HTML. Dengan mengatur ukuran gambar dengan tepat, kamu bisa membuat tampilan situs web menjadi lebih rapi dan menarik.

Memahami Attribute Height dan Width

Dalam HTML, kamu bisa mengubah ukuran gambar menggunakan atribut height (tinggi) dan width (lebar). Dengan menentukan nilai untuk atribut ini, kamu bisa menentukan seberapa besar atau seberapa kecil gambar yang ditampilkan.

Berikut adalah contoh penggunaan atribut height dan width dalam tag img:

<img src="gambar.jpg" width="500" height="600">

Dalam contoh di atas, gambar akan ditampilkan dengan lebar 500 pixel dan tinggi 600 pixel.

Langkah-langkah Mengecilkan Gambar dalam HTML

Berikut adalah langkah-langkah yang bisa kamu ikuti untuk mengecilkan gambar dalam HTML:

1. Tentukan Gambar yang Ingin Dikecilkan

Pertama, tentukan gambar mana yang ingin kamu kecilkan. Kamu harus menyertakan lokasi atau alamat gambar dalam atribut src.

2. Tentukan Ukuran yang Diinginkan

Setelah itu, tentukan ukuran yang diinginkan untuk gambar tersebut. Ukuran ini bisa dalam bentuk pixel atau persentase. Jika dalam pixel, gambar akan memiliki ukuran tetap, sedangkan jika dalam persentase, ukuran gambar akan beradaptasi dengan ukuran elemen pembungkusnya.

3. Sisipkan Atribut Height dan Width

Sekarang, gunakan atribut height dan width untuk menentukan ukuran gambar. Masukkan nilai yang sesuai dengan ukuran yang diinginkan.

<img src="gambar.jpg" width="200" height="200">

Dalam contoh di atas, gambar akan ditampilkan dengan ukuran 200x200 pixel.

Mengatur Ukuran Gambar Sesuai Rasio Aslinya (Responsive)

Jika kamu ingin gambar mengecil atau membesar sesuai dengan ukuran layar atau elemen pembungkusnya, kamu bisa membuatnya menjadi responsive. Kamu bisa melakukan ini dengan hanya menentukan salah satu dari atribut height atau width, dan nilai lainnya akan otomatis disesuaikan.

<img src="gambar.jpg" width="100%">

Dalam contoh di atas, gambar akan selalu sebesar 100% dari lebar elemen pembungkusnya, dan tingginya akan disesuaikan secara otomatis.

Dengan mengatur ukuran gambar di HTML, kamu bisa mengoptimalkan tampilan website dan membuatnya lebih menarik bagi pengunjung. Selamat mencoba!