I HTML kan vi ändra storleken på alla bilder på följande olika sätt:
- Använder HTML-tagg
- Använda ett Inline style-attribut
- Använder intern CSS
Använder HTML-tagg
Obs: HTML 5 stöder inte attributen höjd och bredd för ![]()
, så vi måste använda attributet inline style och interna CSS-alternativ för att ändra bild- eller bildstorlek.
Om vi vill ändra storleken på en bild i dokumentet med hjälp av HTML-tagg som ska visas på en webbsida måste vi följa stegen som ges nedan. Med dessa steg kan vi enkelt ändra bildstorleken:
Steg 1: Först måste vi skriva HTML-koden i valfri textredigerare eller öppna den befintliga HTML-filen i textredigeraren där vi vill ändra storleken på en bild.
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>
Steg 2: Placera nu markören inuti img-taggen. Och sedan måste vi använda höjd- och breddattributen för img-taggen för att ändra storleken på en bild. Så vi måste skriva in dessa attribut:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
Steg 3: Och äntligen måste vi spara HTML-filen och sedan köra den.
len of array i java
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>Testa det nu
Utdata från ovanstående HTML-kod visas i följande skärmdump:
Använda ett Inline Style-attribut
Om vi vill ändra storleken på en bild med hjälp av ett inline style-attribut som ska visas på en webbsida, måste vi följa stegen som ges nedan. Med hjälp av dessa steg kan vi enkelt ändra bildstorleken.
Steg 1: För det första måste vi skriva HTML-koden i valfri textredigerare eller öppna den befintliga HTML-filen i textredigeraren där vi vill använda stilattributet för att ändra storleken på en bild.
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>
Steg 2: Placera nu markören inuti img-tagg av den bilden vars storlek vi vill ändra. Och sedan måste vi skriva stilattributet precis efter src-attributet. Och sedan måste vi skriva egenskapen width and height i stilattributet samma som visas i följande block:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Steg 3: Och till sist måste vi spara HTML-filen och sedan köra den.
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>Testa det nu
Utdata från ovanstående HTML-kod visas i följande skärmdump:
Använder intern CSS
Om vi vill ändra storleken på en bild eller bild med hjälp av en intern överlappande stilmall som ska visas på en webbsida, måste vi följa stegen som ges nedan. Med hjälp av dessa steg kan vi enkelt ändra storleken på vilken bild som helst.
Steg 1: För det första måste vi skriva HTML-koden i valfri textredigerare eller öppna den befintliga HTML-filen i textredigeraren där vi vill använda den interna CSS för att ändra storleken på en bild.
gimp sparas som jpeg
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>
Steg 2: Nu måste vi placera markören i head-taggen i HTML-dokumentet och sedan definiera stilarna inuti taggen som visas i följande block. Och skriv sedan in bredd och höjd attribut i id-väljaren.
#imagesize { width:100px; height:100px; } Steg 3: Nu måste vi skriva in id:t i img-taggen för den bilden vars storlek vi vill ändra:
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> Testa det nu Steg 5: Nu måste vi spara HTML-filen och sedan köra filen. Följande skärmdump visar utdata från ovanstående HTML-kod:
