CSS Object-Fit & Object-Position Properties | Forklart

Bortsett fra styling av bilder, videoer eller annet innhold av en slik type som vises på websidene, er det veldig avgjørende å utpeke disse riktige passformene og posisjonen når du designer strukturen til et nettsted,. Noen egenskaper er gitt i CSS som lar deg utføre disse oppgavene med stor letthet og bare en enkelt kodelinje. Vi har vervet disse egenskapene nedenfor.

1. Objekt-fit eiendom
2. Objektposisjonseiendom

La oss dykke ned i dypet nedenfor.

Objekt-fit eiendom

For å spesifisere hvordan en video eller et bilde som vises på en webside vil bli endret for å justere beholderen, brukes objekt-fit-egenskapen. Denne egenskapen beskriver i utgangspunktet hvordan et element vil fungere når størrelsen på beholderen som holder den endres.

Syntaks

Objekt-FIT: Ingen | Fyll | dekke | inneholder | Scale-Down | Opprinnelig | arve;

Alle disse parametrene er forklart i tabellen nedenfor.

Parametere	Beskrivelse
ingen	Denne verdien endrer ikke størrelsen på innholdet.
fylle	Dette er en standardverdi som gjør at innholdet fyller beholderen enten ved å strekke eller klemme.
dekke	Det brukes til å få innholdet til å fylle beholderen sin mens den bevarer dets aspektforhold.
inneholde	Det brukes også til å få innholdet til å fylle beholderen ved å klippe ut mens den bevarer sideforholdet.
nedskalere	Denne verdien arver enten egenskapene til ingen verdi eller inneholder en verdi.
første	Denne verdien setter egenskapen til standardverdien.
arve	Den arver eiendommen fra forgjengerelementet.

La oss utforske egenskapen til gjenstanden ved hjelp av eksempler.

Eksempel

For bedre å forstå de forskjellige verdiene til den objekt-fit-egenskapen, la oss først legge inn et bilde på vår webside ved hjelp av HTML.

Html

Her har vi lagt til et bilde i SRC -attributtet til taggen.

Produksjon

Et bilde er innebygd på websiden.

La oss nå utforske forskjellige parametere for objekt-fit-egenskapen og se hva disse gjør med bildet over.

Fylle

Her har vi satt en vis.

IMG
Bredde: 200px;
Høyde: 300px;
objekt-fit: fyll;

Produksjon

Bildet er blitt presset for å fylle beholderen.

Dekke

Dekkverdien til den objekt-fit-egenskapen vil kutte sidene av bildene og passe den inne i beholderen som opprettholder dets aspektforhold.

IMG
Bredde: 200px;
Høyde: 300px;
objekt-fit: deksel;

Produksjon

Dekkparameteren fungerer som den skal.

Inneholde

Bortsett fra å gi litt bredde og høyde til bildet, har vi satt objekt-fit-egenskapen til å inneholde som vil klippe bildet i beholderen mens vi bevarer dets aspektforhold.

IMG
Bredde: 200px;
Høyde: 300px;
objekt-fit: inneholde;
Grense: 5px solid blå;

Produksjon

Bildet er klippet vellykket.

Nedskalere

Skala-ned-parameteren til objekt-fit-egenskapen arver enten egenskaper fra dekkparameteren eller inneholder parameteren.

IMG
Bredde: 200px;
Høyde: 300px;
Objekt-fit: Scale-Down;
Grense: 5px solid blå;

Produksjon

Verdien av nedskalaen fungerer som den skal.

Objektposisjonseiendom

For å spesifisere hvordan et element (spesielt et bilde eller en video) skal plasseres langs den horisontale eller vertikale dimensjonen inne i beholderen, brukes objektposisjonsegenskapen. Denne egenskapen brukes alltid sammen med objekt-fit-egenskapen.

Syntaks

Objektposisjon: posisjon | Opprinnelig | arve;

Posisjonsparameteren beskriver posisjonen til bildet eller videoen langs X, og Y -aksene. Det kan enten være en streng som venstre, høyre, sentrum eller et tall i piksler eller prosentandel.

For en bedre forståelse, her er et eksempel på gjenstandens egenskap. Vi vurderer bildet som brukes i eksemplene ovenfor. For å definere sin posisjon sammen med hvordan den vil bli endret for å passe til beholderen, bruker du følgende kodebit.

CSS

IMG
Bredde: 200px;
Høyde: 300px;
objekt-fit: inneholde;
Objektposisjon: 1% 90%;
Grense: 5px solid blå;

I koden ovenfor setter vi objekt-fit-egenskapen til å inneholde, noe som betyr at bildet vil bli klippet inne i beholderen mens du opprettholder dets aspektforhold. I mellomtiden har topp- og venstre plasseringer av bildet blitt tildelt 1%, mens bunn- og høyreposisjonene er blitt tildelt 90%. Til slutt har grensen til beholderen fått 5px med en solid blå farge.

Produksjon

Egenskapen for objektposisjon er implementert med hell.

Konklusjon

CSS gir Objekt-fit og objektposisjonsegenskaper som hjelper til med å sette dimensjonene til bildene. Den objekt-fit-egenskapen beskriver hvordan en video, eller et bilde vil bli endret for å justere beholderen. I mellomtiden definerer objektposisjonsegenskapen hvordan et element (spesielt et bilde eller en video) skal plasseres langs den horisontale eller vertikale dimensjonen inni dens beholder. Begge disse egenskapene sammen med forskjellige verdier som disse kan gjengi er påvist i dette innlegget gjennom eksempler.