Cara Mengatur Ukuran Gambar Di HTML Dan CSS

pada tutorial memasukkan gambar pada html ada beberapa cara untuk menampilkannya.

sekarang kita akan mencoba beberapa cara untuk mengatur ukuran gambar di HTML dan CSS.

mengubah gambar dengan atribut width dan height

Code language: HTML, XML (xml)

hasilnya

Atribut width menentukan lebar gambar sedangkan atribut height untuk mengatur tinggi gambar.

pada contoh diatas ukuran lebar ( width ) sebesar 100 dan tinggi ( height ) sebesar 100. secara default ukuran satuan width dan height adalah px ( pixel ) jadi lebar 100px dan tinggi 100px

> Bca juga : Membuat Garis Horizontal pada html

kita juga bisa menulis satuan px, % di dalam atribut width dan height

cara mengecilkan gambar pada html yaitu dengan mengubah width nya kurang dari lebar ukuran gambar aslinya.

sama dengan memperbesar gambar pada html jangan sampai width lebih lebar dari ukuran gambar asli karena akan menyebabkan gambar menjadi pecah

cara mengetahui ukuran gambar asli di OS windows dengan klik gambarnya maka akan muncul tampilan seperti dibawah ini.

contoh gambar aslinya 100px dan height 100px jika kita ubah menjadi width 400px dan height 400px

Code language: HTML, XML (xml)

hasilnya

gambar pecah karena width dan height lebih dari ukuran aslinyauntuk mengatur gambar agar tampil proporsional gunakan width dan height sesuai ukuran aslinya, jika ingin mengecilkan gunakan ukuran yang proposional misal, kita akan ubah width 50px dan height 50px

Code language: HTML, XML (xml)

hasilnya

cara mengecilkan gambar pada html yang baik hanya mengubah width atau heightnya saja, cara ini lebih disarankan karena height akan mengikuti width gambar tersebut jadi akan terlihat proporsional

contoh jika kita ubah widthnya saja

Code language: HTML, XML (xml)

tinggi gambar akan mengikuti widthnya secara proporsionalcara diatas lebih disarankan agar gambar proposional, jika kita mengatur width dan heigth sembarang seperti dibawah ini

Code language: HTML, XML (xml)

hasilnya

gambar akan menjadi gepeng atau tidak proporsionalmari kita mencobanya langsung apa yang sudah kita pelajari diatas dengan menekan tombol coba script warna biru

html>