Prvok img

Prvok img vytvára obrázok. Cesta k obrázku sa uvádza v atribúte src. Nevyžaduje uzatvárací prvok.

Atribúty

Atribút	Popis
src	Nastavuje cestu k obrázku. Povinný atribút.
alt	Alternatívny text, ktorý sa zobrazí namiesto obrázka, ak nebude nájdený (napríklad pri nesprávne zadanej ceste). Povinný atribút. Pri jeho absencii bude validator (program, ktorý kontroluje korektnosť HTML alebo CSS) hlásiť chybu.
width	Šírka obrázka v pixeloch (v tomto prípade sa jednotky neuvádzajú) alebo v percentách od rodičovského prvku obrázka.
height	Výška obrázka v pixeloch (v tomto prípade sa jednotky neuvádzajú) alebo v percentách od rodičovského prvku obrázka.

Nuansy

Ak pre obrázok nie je nastavená ani šírka, ani výška - obrázok bude mať svoju skutočnú veľkosť. Ak je nastavená výška - obrázok nadobudne nastavenú výšku a šírka sa prispôsobí tak, aby jeho proporcie neboli skreslené.

Ak je nastavená len šírka - analogicky, obrázok sa prispôsobí vo výške tak, aby zachoval proporcie.

Ak je nastavená aj šírka, aj výška - proporcie obrázka môžu byť skreslené (ale nemusia, ako sa vám podarí). Ak je šírka alebo výška (alebo obidve spolu) väčšie ako skutočné - obrázok sa zväčší, ale stratí na kvalite.

Odporúča sa nastavovať šírku a výšku obrázkov v atribútoch (a nie cez CSS) - v tomto prípade bude prehliadač rýchlejšie načítavať obrázky - nemusí po ich získaní počítať veľkosť každého obrázka.

Neodporúča sa zmenšovať skutočné veľkosti obrázka bez potreby. Napríklad, skutočná veľkosť obrázka je 1000 na 1000 pixelov, a vy mu nastavíte šírku na 100px. V tomto prípade bude obrázok na obrazovke vyzerať na 100 pixelov, ale bude mať veľkosť celých tisíc a podľa toho sa bude načítavať oveľa dlhšie.

Príklad

Pridajme na stránku obrázok a nenastavme atribúty height a width. Obrázok bude mať svoju skutočnú veľkosť:

:

Príklad

Skúsme obrázku pridať šírku pomocou atribútu width, výška by sa pri tom mala prispôsobiť tak, aby sa zachovali proporcie obrázka:

:

Príklad

A teraz obrázku pridajme výšku pomocou atribútu height, šírka sa pri tom prispôsobí tak, aby sa zachovali proporcie obrázka:

:

Príklad

Nastavme obrázku súčasne výšku aj šírku. Proporcie obrázka by pri tom mali byť skreslené (nie nevyhnutne, ale v tomto prípade sú výška a šírka zvolené tak, že proporcie sa skreslia):

:

Príklad

Nastavme nesprávnu cestu k obrázku (pre jednoduchosť ju ponechajme prázdnu). Namiesto obrázka uvidíme obsah atribútu alt (môže sa zdať, že je to obyčajný text - ale skúste ho skopírovať - nič sa vám nepodarí, bude sa ťahať ako obrázok):

:

Pozrite tiež