V HTML môžeme zmeniť veľkosť ľubovoľného obrázka nasledujúcimi rôznymi spôsobmi:
- Použitie značky HTML
- Použitie atribútu Inline style
- Použitie interného CSS
Použitie značky HTML
Poznámka: HTML 5 nepodporuje atribúty height a width of ![]()
, takže na zmenu obrázku alebo veľkosti obrázku musíme použiť atribút inline style a interné možnosti CSS.
Ak chceme zmeniť veľkosť obrázka v dokumente pomocou Html tag ktorý sa má zobraziť na webovej stránke, musíme postupovať podľa krokov, ktoré sú uvedené nižšie. Pomocou týchto krokov môžeme jednoducho zmeniť veľkosť obrázka:
Krok 1: Najprv musíme zadať Html kód v ľubovoľnom textovom editore alebo otvoriť existujúci Html súbor v textovom editore, v ktorom chceme zmeniť veľkosť obrázka.
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: Teraz umiestnite kurzor do značky img. A potom musíme použiť atribúty height a width značky img na zmenu veľkosti obrázka. Takže musíme zadať tieto atribúty:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
Krok 3: A nakoniec musíme uložiť súbor Html a potom ho spustiť.
java celé číslo
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>Vyskúšajte to
Výstup vyššie uvedeného Html kódu je zobrazený na nasledujúcej snímke obrazovky:
Použitie atribútu Inline Style
Ak chceme zmeniť veľkosť obrázka pomocou atribútu inline style, ktorý sa má zobraziť na webovej stránke, musíme postupovať podľa krokov, ktoré sú uvedené nižšie. Pomocou týchto krokov môžeme ľahko zmeniť veľkosť obrázka.
Krok 1: Najprv musíme zadať Html kód v ľubovoľnom textovom editore alebo otvoriť existujúci Html súbor v textovom editore, v ktorom chceme použiť atribút style na zmenu veľkosti obrázka.
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: Teraz umiestnite kurzor dovnútra img tag toho obrázku, ktorého veľkosť chceme zmeniť. A potom musíme zadať atribút štýlu hneď za atribút src . A potom musíme zadať vlastnosť width a height do atribútu style rovnako ako v nasledujúcom bloku:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Krok 3: A nakoniec musíme uložiť súbor Html a potom ho spustiť.
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>Vyskúšajte to
Výstup vyššie uvedeného Html kódu je zobrazený na nasledujúcej snímke obrazovky:
Použitie interného CSS
Ak chceme zmeniť veľkosť obrázka alebo obrázka pomocou interného kaskádového štýlu, ktorý sa má zobraziť na webovej stránke, musíme postupovať podľa krokov, ktoré sú uvedené nižšie. Pomocou týchto krokov môžeme jednoducho zmeniť veľkosť ľubovoľného obrázka.
Krok 1: Najprv musíme zadať Html kód v ľubovoľnom textovom editore alebo otvoriť existujúci Html súbor v textovom editore, v ktorom chceme použiť interný CSS na zmenu veľkosti obrázka.
java číslo na reťazec
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: Teraz musíme umiestniť kurzor do značky head dokumentu Html a potom definovať štýly vo vnútri tag, ako je znázornené v nasledujúcom bloku. A potom zadajte šírka a výška atribútu do selektora ID.
#imagesize { width:100px; height:100px; } Krok 3: Teraz musíme zadať ID do značky img tohto obrázka, ktorého veľkosť chceme zmeniť:
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> Vyskúšajte to Krok 5: Teraz musíme uložiť súbor Html a potom súbor spustiť. Nasledujúca snímka obrazovky zobrazuje výstup vyššie uvedeného kódu Html:
