Tag img

Tag img vytváří obrázek. Cesta k obrázku se zapisuje do atributu src. Nevyžaduje uzavírací tag.

Atributy

Atribut	Popis
src	Nastavuje cestu k obrázku. Povinný atribut.
alt	Alternativní text, který se zobrazí místo obrázku, pokud není nalezen (například pokud je cesta k němu zadána špatně). Povinný atribut. Při jeho absenci bude validátor (program, který kontroluje správnost HTML nebo CSS) hlásit chybu.
width	Šířka obrázku v pixelech (v tomto případě se jednotky neuvádějí) nebo v procentech od rodičovského elementu obrázku.
height	Výška obrázku v pixelech (v tomto případě se jednotky neuvádějí) nebo v procentech od rodičovského elementu obrázku.

Nuance

Pokud pro obrázek není nastavena ani šířka, ani výška - obrázek bude mít svou skutečnou velikost. Pokud je nastavena výška - obrázek bude mít nastavenou výšku a šířka se přizpůsobí tak, aby jeho proporce nebyly zkresleny.

Pokud je nastavena pouze šířka - podobně, obrázek se přizpůsobí výškou tak, aby zachoval proporce.

Pokud je nastavena jak šířka, tak výška - proporce obrázku mohou být zkresleny (a nemusí, podle toho, jak se trefíte). Pokud je šířka nebo výška (nebo obojí dohromady) větší než skutečná - obrázek se zvětší, ale ztratí na kvalitě.

Doporučuje se nastavovat šířku a výšku obrázkům v atributech (a ne přes CSS) - v tomto případě bude prohlížeč načítat obrázky rychleji - nemusí dopočítávat velikost každého obrázku po jeho obdržení.

Nedoporučuje se zmenšovat skutečné rozměry obrázku bez nutnosti. Například, skutečná velikost obrázku je 1000 na 1000 pixelů, a vy mu nastavíte šířku na 100px. V tomto případě bude obrázek na obrazovce vypadat na 100 pixelů, ale bude mít velikost celých tisíc pixelů a podle toho se bude načítat mnohem déle.

Příklad

Přidejme na web obrázek a nenastavujme atributy height a width. Obrázek bude mít svou skutečnou velikost:

:

Příklad

Zkusme obrázku přidat šířku pomocí atributu width, výška by se přitom měla přizpůsobit tak, aby zachovala proporce obrázku:

:

Příklad

A nyní přidejme obrázku výšku pomocí atributu height, šířka se přitom přizpůsobí tak, aby zachovala proporce obrázku:

:

Příklad

Nastavme obrázku současně jak výšku, tak šířku. Proporce obrázku by přitom měly být zkresleny (ne nutně, ale v tomto případě jsou výška a šířka zvoleny tak, aby došlo ke zkreslení proporcí):

:

Příklad

Zadejme špatnou cestu k obrázku (pro jednoduchost ji necháme prázdnou). Místo obrázku uvidíme obsah atributu alt (může se zdát, že je to obyčejný text - ale zkuste jej zkopírovat - nepovede se vám to, bude se táhnout jako obrázek):

:

Viz také