Lebar Gambar dalam HTML

Secara lalai, gambar dipaparkan dengan saiz sebenarnya. Sebagai contoh, gambar senyuman yang kami paparkan di atas, mempunyai saiz sebenar 130 oleh 130 piksel dan saiz gambar yang sama kita lihat dalam pelayar.

Jika dikehendaki, saiz gambar boleh diubah, dengan menetapkan lebarnya. Ini dilakukan dengan menggunakan atribut width.

Mari kita tetapkan lebar gambar kami kepada 100 piksel sebagai contoh. Untuk ini, nilai atribut width kita nyatakan nombor 100, seperti ini:

htmlwidth="100"

Apakah saiz gambar pada skrin? Anda mungkin fikir, seperti berikut: lebar 100 piksel, seperti yang kita tetapkan, dan ketinggian sebenar 130, kerana kita tidak menetapkannya. Sebenarnya, ia tidak akan begitu.

Lebarnya memang akan 100 piksel, manakala ketinggian akan menyesuaikan diri supaya perkadaran gambar tidak terherot, iaitu juga akan menjadi 100 piksel.

Mari kita jalankan dan pastikan:

html<img src="smile.png" width="100">

Результат: