HTML lar oss bruke bilder på nettsider og gjøre dem mer attraktive ved å bruke forskjellige stiler. Hvis du trenger å endre sideforholdet til bildet eller bildet ditt ikke passer til nettsideoppsettet ditt, kan du endre størrelsen på det. For dette formålet kan du bruke ' bredde ' og ' høyde ' eiendommer på ' img ' stikkord. Disse egenskapsverdiene kan enkelt angis i CSS-piksler.

I denne håndboken lærer du metoden for å endre størrelse på bildet i HTML.

Før du starter, er det nødvendig å legge til bildet i HTML-filen som skal endre størrelsen på bildet.

Hvordan legge inn et bilde i HTML?

For å legge til et bilde i HTML, bruk følgende syntaks:

Beskrivelsen av ovennevnte syntaks er beskrevet nedenfor. « img '-taggen bruker to attributter:

• • 'src' brukes til å angi banen (URL) til bildet.
  • 'alt' brukes til å gi den alternative teksten hvis bildet ikke vises.

HTML

Koden nedenfor representerer to div. I den første div la vi til en overskrift øverst i midten av nettsiden vår som ' Bildestørrelse i HTML ' ved å bruke

-taggen:

< div >
< senter >
< h1 > Bildestørrelse i HTML h1 >
senter >
div >

Den andre div er lagt til med klassen som heter ' container ” og for å representere bildet i midten har vi brukt

-taggen. Inne i midten, skriv koden nedenfor for å legge til et bilde:

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

Det valgte bildet med ' 640*437 ' sideforhold vil se slik ut:

Den neste delen vil demonstrere metoden for å endre størrelse på et bilde.

Hvordan endre størrelse på bildet i HTML?

Du kan tilpasse størrelsen på bildet eller endre størrelsen på det ved å bruke ' bredde ' og ' høyde ”-attributter for å angi bredde og høyde.

La oss nå sette breddeverdien til bildet som er lagt til som ' 300 ' og se hvordan det fungerer:

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

Det kan ses at bildebredden er endret, og størrelsen er endret:

I tillegg til bredden, ' høyde ”-attributt kan også brukes til samme formål. For å se størrelsesforskjellen, sett ' 550 ' piksler som bildehøyde:

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

Du kan tydelig se forskjellen i bildestørrelsen:

Det er hvordan bredde- og høydeattributter brukes til å endre størrelsen på bildet.

Konklusjon

I HTML er ' høyde ' og ' bredde ”-attributter brukes for å endre størrelsen på bildet. Du kan endre standard sideforhold for bildet som legges til ved å angi verdiene for disse attributtene. Som et resultat kan en tydelig forskjell sees med hensyn til bildestørrelse. Denne bloggen har demonstrert metoden for å bruke høyde- og vektegenskaper for å endre størrelse på bilder i HTML.