Tag img

Tag img mencipta gambar. Laluan ke gambar ditulis dalam atribut src. Tidak memerlukan tag penutup.

Atribut

Atribut	Keterangan
src	Menetapkan laluan ke gambar. Atribut wajib.
alt	Teks alternatif yang akan dipaparkan sebagai ganti gambar, jika ia tidak ditemui (contohnya, laluan kepadanya ditulis dengan salah). Atribut wajib. Jika tiada, validator (program yang memeriksa ketepatan HTML atau CSS) akan memberi ralat.
width	Lebar gambar, dalam piksel (dalam kes ini unit pengukuran tidak dinyatakan) atau peratusan daripada elemen induk gambar.
height	Tinggi gambar, dalam piksel (dalam kes ini unit pengukuran tidak dinyatakan) atau peratusan daripada elemen induk gambar.

Nuansa

Jika untuk gambar tidak ditetapkan lebar mahupun tinggi - gambar akan mempunyai saiz sebenarnya. Jika tinggi ditetapkan - gambar akan menjadi tinggi yang ditetapkan, dan lebarnya akan menyesuaikan supaya perkadarannya tidak terherot.

Jika hanya lebar ditetapkan - sama, gambar akan menyesuaikan tinggi supaya mengekalkan perkadaran.

Jika kedua-dua lebar dan tinggi ditetapkan - perkadaran gambar mungkin terherot (atau mungkin tidak, terserahlah nasib). Jika lebar atau tinggi (atau kedua-duanya sekali) lebih besar daripada saiz sebenar - gambar akan membesar, tapi akan kehilangan kualiti.

Disyorkan untuk menetapkan lebar dan tinggi gambar dalam atribut (bukan melalui CSS) - dalam kes ini pelayar akan memuatkan imej dengan lebih pantas - ia tidak perlu mengira saiz setiap gambar selepas menerimanya.

Tidak disyorkan untuk mengurangkan saiz sebenar gambar tanpa keperluan. Contohnya, saiz sebenar gambar 1000 kali 1000 piksel, dan anda menetapkan lebarnya kepada 100px. Dalam kes ini gambar di skrin akan kelihatan 100 piksel, tetapi mempunyai saiz penuh seribu piksel dan, oleh itu, dimuatkan jauh lebih lama.

Contoh

Mari tambah gambar ke laman web dan jangan tetapkan atribut height dan width. Gambar akan mempunyai saiz sebenarnya:

:

Contoh

Mari cuba tambah lebar kepada gambar menggunakan atribut width, tinggi pada masa yang sama harus menyesuaikan diri untuk mengekalkan perkadaran gambar:

:

Contoh

Sekarang mari tambah tinggi kepada gambar menggunakan atribut height, lebar pada masa yang sama akan menyesuaikan diri untuk mengekalkan perkadaran gambar:

:

Contoh

Mari serentak tambah kedua-dua tinggi dan lebar kepada gambar. Perkadaran gambar pada masa yang sama harus menjadi terherot (tidak semestinya, tetapi dalam kes ini tinggi dan lebar dipilih supaya perkadaran terherot):

:

Contoh

Mari letakkan laluan yang salah ke gambar (untuk kesederhanaan, biarkan ia kosong). Sebagai ganti gambar kita akan melihat kandungan atribut alt (nampaknya ini teks biasa - tapi cuba salinkan - anda tidak akan berjaya, ia akan menarik seperti gambar):

:

Lihat juga