HTML tillåter oss att använda bilder på webbsidor och göra dem mer tilltalande genom att använda olika stilar. Om du behöver ändra bildens bildförhållande eller om din bild inte passar din webbsidelayout kan du ändra storleken på den. För detta ändamål kan du använda ' bredd ' och ' höjd ' egenskaper på ' img '-tagg. Dessa egenskapsvärden kan enkelt ställas in i CSS-pixlar.

I den här manualen kommer du att lära dig metoden för att ändra storlek på bilden i HTML.

Innan du startar måste du lägga till bilden i HTML-filen på vilken bildstorleksändringen kommer att utföras.

Hur bäddar man in en bild i HTML?

För att lägga till en bild i HTML, använd följande syntax:

Beskrivningen av ovan nämnda syntax beskrivs nedan. den ' img ”-taggen använder två attribut:

• • 'src' används för att tillhandahålla bildens sökväg (URL).
  • 'allt' används för att tillhandahålla alternativ text om bilden inte visas.

HTML

Koden nedan representerar två div. I den första div lade vi till en rubrik högst upp i mitten av vår webbsida som ' Bildstorlek i HTML ” genom att använda taggen

:

< div >
< Centrum >
< h1 > Bildstorlek i HTML h1 >
Centrum >
div >

Den andra div läggs till med klassen som heter ' behållare ” och för att representera bilden i mitten har vi använt taggen

. Inuti mitten, skriv nedanstående kod för att lägga till en bild:

< div klass = 'behållare' >
< Centrum >
< img src = 'images/butterfly.jpg' allt = 'alternativ text' >
Centrum >
div >

Den valda bilden med ' 640*437 ' bildförhållande kommer att se ut så här:

Nästa avsnitt kommer att demonstrera metoden för att ändra storlek på en bild.

Hur ändrar man storlek på bilden i HTML?

Du kan anpassa storleken på bilden eller ändra storlek på den genom att använda ' bredd ' och ' höjd ”-attribut för att ställa in dess bredd och höjd.

Låt oss nu ställa in breddvärdet för den tillagda bilden som ' 300 ' och se hur det fungerar:

< img src = 'images/butterfly.jpg' allt = 'alternativ text' bredd = '300' >

Det kan ses att bildens bredd har ändrats och storleken har ändrats:

Förutom bredden, ' höjd ”-attribut kan också användas för samma ändamål. För att se storleksskillnaden, ställ in ' 550 ' pixlar som bildhöjd:

< img src = 'images/butterfly.jpg' allt = 'alternativ text' bredd = '300' höjd = '550' >

Du kan tydligt observera skillnaden i bildstorlek:

Det är så bredd- och höjdattribut används för att ändra storlek på bilden.

Slutsats

I HTML är ' höjd ' och ' bredd ”-attribut används för att ändra storlek på bilden. Du kan ändra standardbildförhållandet för den tillagda bilden genom att ställa in värdena för dessa attribut. Som ett resultat kan en tydlig skillnad ses med avseende på bildstorlek. Den här bloggen har demonstrerat metoden för att använda höjd- och viktegenskaper för att ändra storlek på bilder i HTML.