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

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ť:

html<img src="monkey.png" alt="opička">

Результат:

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:

html<img src="monkey.png" width="200" alt="opička">

Результат:

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:

html<img src="monkey.png" height="100" alt="opička">

Результат:

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):

html<img src="monkey.png" height="100" width="300" alt="opička">

Результат:

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):

html<img src="" alt="opička">

Результат:

Pozrite tiež