HTML giver os mulighed for at bruge billeder på websider og gøre dem mere attraktive ved at anvende forskellige stilarter. Hvis du har brug for at ændre billedformatet, eller dit billede ikke passer til dit websidelayout, kan du ændre størrelsen på det. Til dette formål kan du bruge ' bredde ' og ' højde ' ejendomme på ' img ” tag. Disse egenskabsværdier kan nemt indstilles i CSS-pixels.

I denne manual lærer du metoden til at ændre størrelsen på billedet i HTML.

Før du starter, er det nødvendigt at tilføje billedet til HTML-filen, hvorpå billedændringsoperationen vil blive udført.

Hvordan indlejrer man et billede i HTML?

For at tilføje et billede i HTML skal du bruge følgende syntaks:

Beskrivelsen af ​​ovennævnte syntaks er beskrevet nedenfor. Det ' img ” tag bruger to attributter:

• • 'src' bruges til at angive stien (URL) til billedet.
  • “alt” bruges til at give den alternative tekst, hvis billedet ikke vises.

HTML

Koden nedenfor repræsenterer to divs. I den første div tilføjede vi en overskrift øverst i midten af ​​vores webside som ' Billedstørrelse i HTML ” ved at bruge

-tagget:

< div >
< centrum >
< h1 > Billedestørrelse i HTML h1 >
centrum >
div >

Den anden div tilføjes med klassen med navnet ' beholder ” og til at repræsentere billedet i midten, har vi brugt

-tagget. Inde i midten skal du skrive nedenstående kode for at tilføje et billede:

< div klasse = 'beholder' >
< centrum >
< img src = 'images/butterfly.jpg' alt = 'alternativ tekst' >
centrum >
div >

Det valgte billede med ' 640*437 ' billedformat vil se sådan ud:

Det næste afsnit vil demonstrere metoden til at ændre størrelsen på et billede.

Hvordan ændrer man størrelsen på billedet i HTML?

Du kan tilpasse størrelsen på billedet eller ændre størrelsen ved at bruge ' bredde ' og ' højde ”-attributter for at indstille dens bredde og højde.

Lad os nu indstille breddeværdien for det tilføjede billede som ' 300 ' og se, hvordan det virker:

< img src = 'images/butterfly.jpg' alt = 'alternativ tekst' bredde = '300' >

Det kan ses, at billedbredden er blevet ændret, og størrelsen er blevet ændret med succes:

Ud over bredden er ' højde ”-attribut kan også bruges til samme formål. For at se størrelsesforskellen skal du indstille ' 550 ' pixels som billedhøjde:

< img src = 'images/butterfly.jpg' alt = 'alternativ tekst' bredde = '300' højde = '550' >

Du kan tydeligt se forskellen i billedstørrelsen:

Det er sådan bredde- og højdeattributter bruges til at ændre størrelsen på billedet.

Konklusion

I HTML er ' højde ' og ' bredde ”-attributter bruges til at ændre størrelsen på billedet. Du kan ændre standardformatforholdet for det tilføjede billede ved at indstille værdierne for disse attributter. Som et resultat kan der ses en klar forskel med hensyn til billedstørrelse. Denne blog har demonstreret metoden til at bruge højde- og vægtegenskaber til at ændre størrelse på billeder i HTML.