HTML Juster bildestørrelsen

“Det er veldig vanlig at websider har bilder av forskjellige slag. De får en webside til å se mer visuelt tiltalende. Å velge riktig størrelse på et bilde er imidlertid virkelig viktig fordi et bilde verken må være for stort at det overskygger teksten på websiden din eller for lite at det knapt kan sees. Derfor vil vi i denne opplæringen snakke om måtene du kan justere bildestørrelsen i HTML veldig enkelt.”

Hva mener vi med å justere bildestørrelsen i HTML?

Størrelsen på et bilde er en kombinasjon av høyden og bredden. For eksempel, hvis vi har et bilde av størrelse 100 x 100, vil det bety at nevnte bilde vil ha en høyde og bredde på 100 piksler. Ved å justere størrelsen på et bilde i HTML, mener vi bokstavelig talt å endre høyden og bredden på dette bildet i henhold til våre krav. Dessuten er det heller ikke obligatorisk at et bilde har samme bredde og høyde. Det er med andre ord helt normalt at et bilde har en annen høyde og bredde. La oss nå lære metodene for å justere størrelsen på et bilde i HTML.

Hvordan justere bildestørrelsen i HTML?

Du kan enkelt justere størrelsen på noen av de ønskede bildene dine i HTML ved å følge en av de to metodene som er forklart nedenfor. Før vi går videre med disse metodene, vil vi imidlertid vise deg bildet hvis størrelse vi ønsker å justere ved å bruke disse metodene. Dette bildet er som følger:

Den opprinnelige størrelsen på dette bildet er 900 x 900, i.e., Høyden, så vel som bredden på dette bildet, er 900 piksler, som fremhevet på bildet nedenfor:

Metode 1: Ved å bruke de enkle høyden og breddeegenskapene til HTML

I denne metoden vil vi bruke den enkle høyden og breddeegenskapene til HTML for å justere størrelsen på vårt spesifiserte bilde. Du kan tilordne hvilken som helst verdi etter ditt valg til disse egenskapene. HTML -skriptet for denne metoden er som følger:

I denne metoden er hovedfokuset vårt på å justere bildestørrelsen, som vi har brukt "IMG" -attributtet til HTML. Denne attributtet brukes når du vil leke med bilder i HTML. Deretter har vi brukt "SRC" -attributtet, med den hjelpen vi refererer til den nøyaktige banen eller plasseringen der målbildet vårt er bosatt. Du kan se at vi etter denne attributtet har nevnt den komplette banen til vårt ønskede bilde. Deretter har vi "ALT" -attributtet, som er der for å nevne enhver alternativ tekst for å beskrive bildet. Du har helt lov til å hoppe over dette attributtet. Dette blir fulgt av "bredde" og "høyde" -egenskapene til HTML. Vi har holdt verdiene til begge disse egenskapene som "400". Det betyr at dette skriptet vil vise målbildet vårt i redusert størrelse ved utførelse.

Nettsiden vist på bildet nedenfor viser vårt bilde i størrelse 400 x 400.

Metode nr. 2: Ved å bruke stilattributtet til HTML

Dette er bare en alternativ metode for å justere størrelsen på et bilde i HTML. Det benytter seg av HTMLs inline stil attributt. For å bruke denne metoden, må du se på følgende HTML -skript:

Dette HTML -skriptet er ganske mye som det vi har diskutert ovenfor i vår første metode. Imidlertid, i stedet for bare å spesifisere verdiene til "høyden" og "bredden" HTML -egenskaper, har vi imidlertid brukt "stilen" -attributtet, og så har vi vedlagt disse egenskapene i den. Denne gangen ønsker vi å endre størrelsen på målbildet vårt til 600 x 600.

Vårt spesifiserte bilde med den nylig justerte størrelsen er vist på bildet nedenfor:

Konklusjon

Denne opplæringen ble designet for å veilede deg angående metodene for å justere bildestørrelsen i HTML. I denne forbindelse delte vi to forskjellige metoder med deg som er veldig enkle å implementere. Etter å ha gått gjennom disse to metodene, vil du ikke synes det er vanskelig å justere størrelsene på bildene dine, jeg.e., Øk eller reduser bildestørrelsen i henhold til dine krav mens du jobber med HTML.