HTML IMG -skalering

Når et bilde legges til et HTML -dokument, må det justeres riktig for å opprettholde en bedre visuell representasjon av grensesnittet. Mer spesifikt, html “img”Skalering betyr å justere bildet med hensyn til forskjellige parametere som“høyde”Og“bredde”For å endre størrelsen på bildet. Uten å endre størrelse eller skalering, vises den opprinnelige størrelsen på bildet som standardstørrelse i utgangen. For å skalere HTML -bildene, brukes CSS "høyde" og "bredde" -egenskaper på forskjellige måter.

Dette innlegget vil dekke følgende tilnærminger:

• Metode 1: Skalere et bilde ved hjelp av prosentverdier
• Metode 2: Skalere et bilde ved hjelp av pikselverdier

Metode 1: Skalere et bilde ved hjelp av prosentverdier

Utviklerne kan bruke CSS “høyde”Og“bredde”Egenskaper på HTML””Element og definere et hvilket som helst antall prosenter i CSS -stilelementet for å stille inn den horisontale og vertikale lengden på bildet deretter.

Eksempel
La oss sjekke ut et eksempel på å endre størrelse på eller skalere bildet ved hjelp av CSS -egenskapene. Anta at vi har følgende beholder, som CSS -egenskapene må brukes på:

I ovennevnte HTML -kodeutdrag:

• En "div”Containerelement er lagt til med klassen erklært som“ContainerImage”.
• Inne i "div" -merket er det "img”Tag med“id”Erklært som“myid" og "src" Egenskap.
• Den nøyaktige bildeadressen fra systemet er lagt til som verdien av "src" Egenskap. Dette vil legge til det valgte bildet fra systemet i DIV -beholderen i utgangen.

Nå er det påkrevd å bruke CSS -egenskapene på ovennevnte HTML -element for å skalere det ekstra bildet:

#Myid
Bredde: 50%;
Høyde: 40%;

I ovennevnte CSS -stilelement:

• “id”Erklært i“img”Element legges til for å referere til“”Element.
• Inne i diven, “bredde”Eiendom er definert som“50%”. Dette justerer bredden på bildet på skjermen for å dekke halvparten av det horisontale området på skjermen.
• Etter det, “høyde”Eiendom er satt til“40%”For å dekke“ 40%”-området for hele vertikale skjermen i utgangen.

Dette vil generere følgende utgangsgrensesnitt:

Metode 2: Skalere et bilde ved hjelp av pikselverdier

Når CSS endrer størrelse på egenskaper, i.e., “høyde”Og“bredde”Brukes ved å definere verdier for dem i piksler, det endrer størrelsen på bildet i utgangen i henhold til den eksakte pikselverdien i stedet for å justere størrelsen på bildet i henhold til hele området på skjermen.

Eksempel
La oss bruke CSS “høyde”Og“bredde”Egenskaper ved å definere verdiene deres i“PX”(Pixels) til nøyaktig det samme HTML -utdraget lagt til i forrige del av dette innlegget:

#Myid
Høyde: 250px;
Bredde: 550px;

I ovennevnte CSS -kodebit:

• “høyde”Eiendom er satt til“250px”. Dette vil sette høyden på bildet til nøyaktig 250 piksler.
• “bredde”Eiendom er satt til“550px”For å sette bredden til nøyaktig 550 piksler i utgangen.

I følge koden ovenfor vil det ekstra bildet skaleres som følger:

Slik skalerer du et bilde i HTML.

Konklusjon

Bildene kan skaleres eller endres i et HTML -dokument ved hjelp av CSS “høyde”Og“bredde" egenskaper. For å utnytte dem, erklære en “id”Eller en“klasse”For HTML””Element, legg til den respektive velgeren i CSS -stilelementet og definer CSS -høyde- og breddeegenskapene for“ "elementet. "Høyden" og "bredden" kan defineres ved å legge til verdier i enten prosentvis eller piksler. Denne bloggen diskuterte tilnærmingene for å skalere bilder i HTML.