V HTML můžeme změnit velikost libovolného obrázku pomocí následujících různých způsobů:
- Použití HTML tagu
- Použití atributu stylu Inline
- Použití interního CSS
Použití HTML tagu
Poznámka: HTML 5 nepodporuje atribut height a width ![]()
, takže pro změnu obrázku nebo velikosti obrázku musíme použít atribut inline style a interní možnosti CSS.
Pokud chceme změnit velikost obrázku v dokumentu pomocí Html tag který se má zobrazit na webové stránce, musíme postupovat podle kroků, které jsou uvedeny níže. Pomocí těchto kroků můžeme snadno změnit velikost obrázku:
Krok 1: Nejprve musíme zadat Html kód v libovolném textovém editoru nebo otevřít existující Html soubor v textovém editoru, ve kterém chceme změnit velikost obrázku.
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Krok 2: Nyní umístěte kurzor do značky img. A pak musíme pro změnu velikosti obrázku použít atribut height a width tagu img. Musíme tedy zadat tyto atributy:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
Krok 3: A nakonec musíme uložit soubor Html a poté jej spustit.
Java ne
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Otestujte to hned
Výstup výše uvedeného Html kódu je zobrazen na následujícím snímku obrazovky:
Použití atributu Inline Style
Pokud chceme změnit velikost obrázku pomocí atributu inline style, který se má zobrazit na webové stránce, musíme postupovat podle níže uvedených kroků. Pomocí těchto kroků můžeme snadno změnit velikost obrázku.
Krok 1: Nejprve musíme zadat Html kód v libovolném textovém editoru nebo otevřít existující Html soubor v textovém editoru, ve kterém chceme použít atribut style pro změnu velikosti obrázku.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Krok 2: Nyní umístěte kurzor dovnitř img tag toho obrázku, jehož velikost chceme změnit. A pak musíme zadat atribut style hned za atribut src . A pak musíme zadat vlastnost width a height do atributu style stejně jako v následujícím bloku:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Krok 3: A nakonec musíme uložit soubor Html a poté jej spustit.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Otestujte to hned
Výstup výše uvedeného Html kódu je zobrazen na následujícím snímku obrazovky:
Použití interního CSS
Pokud chceme změnit velikost obrázku nebo obrázku pomocí interní kaskádové šablony stylů, která se má zobrazit na webové stránce, musíme postupovat podle níže uvedených kroků. Pomocí těchto kroků můžeme snadno změnit velikost libovolného obrázku.
Krok 1: Nejprve musíme zadat Html kód v libovolném textovém editoru nebo otevřít existující Html soubor v textovém editoru, ve kterém chceme použít interní CSS pro změnu velikosti obrázku.
zarovnat obrázek s css
Change the Size of an image using internal CSS Hello User! <br> This is <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Krok 2: Nyní musíme umístit kurzor do značky head dokumentu Html a poté definovat styly uvnitř tag, jak je znázorněno v následujícím bloku. A pak zadejte šířka a výška atribut do selektoru id.
#imagesize { width:100px; height:100px; } Krok 3: Nyní musíme zadat id do značky img tohoto obrázku, jehož velikost chceme změnit:
Change the Size of an image using internal CSS #imagesize { width:200px; height:200px; } Hello User! <br> This is <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp" id="imagesize"> <br> Otestujte to hned Krok 5: Nyní musíme uložit soubor Html a poté soubor spustit. Následující snímek obrazovky ukazuje výstup výše uvedeného Html kódu:
