5.2 Velikost obrázku

U vloženého obrázku ze nastavit spoustu vlastností. Nastavení velikosti zobrazovaného obrázku se dělá pomocí parametru
style="width: číslo s jednotkou;" nastavení šířky obrázku
nebo
style="height: číslo s jednotkou;" nastavení výšky obrázku

Druhý rozměr se dopočítá automaticky, aby se obrázek zobrazil ve stejném poměru stran, jako má původní obrázek.

Pokud bychom nastavili velikost délky i šířky, mohlo by dojít ke zkreslení - deformaci obrázku, pokud by nastavené rozměry nebyly v odpovídající poměru.

Rozměry obrázku můžeme nastavit buď v přesně , tj. v bodech nebo poměrně, tj. v procentech.

a) nastavení velikosti obrázku v pixelech (bodech) px

Do tagu img přidáme navíc parametr velikosti šířky nebo výšky a velikost v pixelech:
Př:  <img src="obrazky/domek.jpg" style="width: 50px;"> 
Obrázek domek.jpg (v podsložce obrazky) se zobrazí široký 50 pixelů.

Př:  <img src="obrazky/kytka.jpg" style="height: 120px;"> 
Obrázek kytka.jpg (v podsložce obrazky) se zobrazí vysoký 120 pixelů.

Obrázek, který má velikost zadanou pomocí pixelů, se vždy zobrazuje stejně velký.

b) nastavení velikosti obrázku v procentech %

Př:  <img src="obrazky/ctverec.jpg" style="width: 50%;"> 
Obrázek ctverec.jpg (v podsložce obrazky) se zobrazí široký polovinu okna  nebo nadřazeného prvku (například bloku <div> </div>), ve kterém se zobrazuje.

Př:  <img src="obrazky/slunicko.jpg" style="height: 20%;"> 
Obrázek slunicko.jpg (v podsložce obrazky) se zobrazí široký jednu pětinu (20%) okna  nebo nadřazeného prvku (například bloku <div> </div>), ve kterém se zobrazuje. 

Velikost obrázku zadaná procenty je závislá na velikosti okna nebo nadřazeného prvku. Tato vlastnost je v některých případech výhodná a proto se využívá.