Šířka obrázku v HTML

Ve výchozím nastavení se obrázky zobrazují svou skutečnou velikostí. Například obrázek se smajlíkem, který jsme zobrazovali výše, má skutečnou velikost 130 na 130 pixelů a stejnou velikost obrázku vidíme v prohlížeči.

V případě potřeby lze velikost obrázku změnit jeho šířkou. To se provádí pomocí atributu width.

Jako příklad nastavme našemu obrázku šířku 100 pixelů. Pro hodnotu atributu width uvedeme číslo 100, takto:

Jaké velikosti bude obrázek na obrazovce? Mohlo by se zdát, že následující: šířka 100 pixelů, jak jsme nastavili, a skutečná výška 130, protože jsme ji nenastavili. Ve skutečnosti to tak nebude.

Šířka skutečně bude 100 pixelů, ale výška se upraví tak, aby proporce obrázku nebyly zkresleny, tedy také bude 100 pixelů.

Spusťme a přesvědčme se o tom:

: