Az img tag

A img tag képet hoz létre. A kép elérési útját az src attribútumban kell megadni. Nem igényel záró taget.

Attribútumok

Attribútum	Leírás
src	Meghatározza a kép elérési útját. Kötelező attribútum.
alt	Alternatív szöveg, amely a kép helyett jelenik meg, ha a kép nem található (például ha rossz az elérési út). Kötelező attribútum. Hiányában a validátor (a HTML vagy CSS helyességét ellenőrző program) hibát jelez.
width	A kép szélessége pixelben (ebben az esetben a mértékegységet nem kell megadni) vagy százalékban a kép szülőeleméhez viszonyítva.
height	A kép magassága pixelben (ebben az esetben a mértékegységet nem kell megadni) vagy százalékban a kép szülőeleméhez viszonyítva.

Finomságok

Ha egy képnek nincs megadva sem szélessége, sem magassága - a kép a valódi méretében jelenik meg. Ha meg van adva a magasság - a kép a megadott magasságú lesz, a szélessége pedig úgy igazodik, hogy az arányai ne torzuljanak.

Ha csak a szélesség van megadva - hasonlóképpen, a kép magassága úgy igazodik, hogy megőrizze az arányait.

Ha mind a szélesség, mind a magasság meg van adva - a kép arányai torzulhatnak (de nem feltétlenül, ahogy épp bejön). Ha a szélesség vagy a magasság (vagy mindkettő) nagyobb, mint a valódi méret - a kép megnő, de minőségében romlik.

Ajánlott a képek szélességét és magasságát attribútumokban megadni (és nem CSS-en keresztül) - ilyenkor a böngésző gyorsabban tölti be a képeket - neki nem kell minden egyes kép méretét kiszámolnia a megérkezése után.

Nem ajánlott a kép valódi méreteit indokolatlanul csökkenteni. Például, a kép valódi mérete 1000 x 1000 pixel, te pedig 100px szélességet adsz meg neki. Ebben az esetben a kép a képernyőn 100 pixel szélesnek fog látszani, de a mérete továbbra is ezer pixel lesz, és ennek megfelelően sokkal tovább tart a betöltése.

Példa

Adjunk hozzá egy képet a weboldalhoz, és ne adjunk meg height és width attribútumokat. A kép a valódi méretében jelenik meg:

:

Példa

Próbáljunk meg a képnek szélességet adni a width attribútummal, ilyenkor a magasságnak úgy kell igazodnia, hogy megőrizze a kép arányait:

:

Példa

Most adjunk a képnek magasságot a height attribútummal, a szélesség ilyenkor úgy igazodik, hogy megőrizze a kép arányait:

:

Példa

Adjunk meg egyszerre mind magasságot, mind szélességet. Ilyenkor a kép arányai torzulhatnak (nem feltétlenül, de ebben az esetben a magasság és a szélesség úgy van megválasztva, hogy az arányok torzuljanak):

:

Példa

Állítsunk be hibás elérési utat a képhez (az egyszerűség kedvéért hagyjuk üresen). A kép helyett az alt attribútum tartalmát fogjuk látni (úgy tűnik, mintha ez csak sima szöveg lenne - de próbáld meg másolni - nem fog sikerülni, hiszen képként viselkedik):

:

Lásd még