Hvordan endre størrelse på Image i CSS

Mens vi utvikler et nettsted, bruker vi ofte bildene som er lastet ned fra Internett. Imidlertid eksisterer det en sjanse for at det nedlastede bildet ikke er i riktig størrelse. I en slik situasjon er den ideelle løsningen å endre størrelse på ønsket bilde.

Det er forskjellige måter å endre størrelse på et bilde på; Gå for CSS når det gjelder å finne den raskeste og mest effektive måten. CSS tilbyr forskjellige egenskaper som kan brukes til å endre størrelse på bilder i henhold til dine preferanser.

Denne artikkelen vil demonstrere metodene for å endre størrelse på bilder ved hjelp av CSS.

Hvordan endre størrelse på et bilde i CSS?

I CSS kan du bruke følgende egenskaper til å endre størrelse på et bilde:

• Høyde- og breddeegenskaper
• objekt-fit eiendom
• Bakgrunnsstørrelse

Vi vil gå gjennom hver av de nevnte metodene en etter en!

Metode 1: Bruk egenskaper for høyde og bredde for å endre størrelse i CSS

I CSS brukes høydeegenskapen for å justere høyden på HTML -elementene. På samme måte er breddeegenskapen ganske nyttig for justering av bredden på elementene.

Hvis du bare er villig til å endre “høyde”Av bildet, sjekk deretter følgende syntaks:

Høyde: 85%;

Her, “85%”Representerer verdien av høydeegenskapen.

For å endre bildet “bredde”, Sett verdien i henhold til dine preferanser:

Bredde: 85%;

Merk: Bruker "bil”Som verdien av høyden og breddeegenskapene vil bidra til å opprettholde bildens respons med hensyn til forskjellige enheter.

Noen ganger er det imidlertid nødvendig å endre størrelsen på bildet horisontalt og vertikalt. Hvis det er tilfelle, kan du tilordne en spesifikk verdi til høyden og breddeegenskapene.

Eksempel

I dette eksemplet vil vi endre størrelse på følgende bilde:

For å endre størrelse på det gitte bildet, vil vi sette verdien av høydeegenskaper som “55%”Og bredde som“70%”I CSS -fil:

Spesifiser bildekilden "src”I“”Tag av HTML -filen:

Vi har endret størrelse på bildet ved hjelp av de nevnte egenskapene.

Metode 2: Bruk objekt-fit-egenskap for å endre størrelse på bilde i CSS

I CSS, “Objekt-fitEiendom brukes til å justere et bilde til beholderen automatisk. Ved hjelp av denne egenskapen kan vi få et bilde til å passe inn i beholderen med de vervede verdiene:

• fylle: Hvis bildet er strukket med hensyn til beholderen, kan det endres for å passe inn i beholderen.
• inneholde: Ved å bruke denne egenskapen, opprettholder det valgte bildet sitt sideforhold; Imidlertid er det endret for å passe inn i beholderen.
• dekke: Det gjør at bildet kan dekke hele beholderen.
• ingen: Bildets størrelse forblir den samme.
• nedskalere: Når objekt-fit egenskapverdien er satt som nedskalering, sjekker den om bildet skal forbli i samme størrelse eller bli endret for å passe inn i beholderen.

Eksempel

Vi vil bruke det samme bildet og sette sin objektforholdsverdi som "inneholde”. Som et resultat vil det valgte bildet opprettholde dets sideforhold, men er endret for å passe inn i samme beholder:

Bilde montert i beholderen. Du kan imidlertid bruke dekk, fylle eller nedskalere for å oppnå ønsket bildedimensjon:

Metode 3: Bruk egenskap i bakgrunnsstørrelse for å endre størrelse på Image i CSS

For å endre størrelse på et bakgrunnsbilde i CSS, kan du ganske enkelt bruke "bakgrunnsstørrelse”Eiendom. Denne egenskapen er ideell for justering av bakgrunnsbilder.

Før du hopper dypere, må du se på beskrivelsen av de forskjellige verdiene:

• bil(Standardverdi): Ved å stille inn bakgrunnsstørrelse som "bil”, Bildet vil forbli i sin opprinnelige størrelse.
• dekke: Denne verdien tvinger bildet til å dekke hele beholderen hvis det er noen plass.
• inneholde: For å sikre at bildet er fullt synlig, bruk "inneholde”Som verdien av bakgrunnsstørrelsesegenskapen.

Eksempel

Vi vil nå endre størrelse på "Bilde.png”Ved å sette verdien av dens bakgrunnsstørrelse som“inneholde”. For å unngå repetisjon av bildet, vil vi også bruke "Bakgrunnsrepetitt”Eiendom og setter verdien til“Ingen repeter”. Dessuten, “250px”Polstring er nødvendig for å putte innholdet inne i beholderen.

Her er eksempel et "id" av "div”Container:

Deretter tildeler du “eksempel”Id til og legg til litt tekst ved hjelp av

stikkord:

TEKST

Den spesifiserte verdien av egenskapen til bakgrunnsstørrelse vil gjøre bildet fullt ut synlig. Du kan imidlertid angi hvilken som helst verdi i henhold til dine preferanser:

Vi har gitt de nødvendige instruksjonene relatert til å endre størrelse på et bilde i CSS.

Konklusjon

For å endre størrelsen på bildet ved hjelp av CSS, kan du bruke høyden eller breddeegenskapen. CSS-objekt-fit-egenskap kan også hjelpe til med å montere et bilde med hensyn til beholderen. Å bruke objekt-fit-egenskapen vil hjelpe deg med å utføre automatisk betaling av bildet. Dessuten kan egenskapen til bakgrunnsstørrelse også brukes til det nevnte formålet. Denne artikkelen har beskrevet de to effektive metodene for å endre størrelse på et bilde i CSS.