Hvordan beskjære et bilde ved hjelp av CSS

Denne oppskrivningen vil diskutere:

• Metode 1: Hvordan beskjære et bilde gjennom “Overflow: Hidden” -egenskaper?
• Metode 2: Hvordan beskjære et bilde gjennom "bakgrunnsbilde" -egenskaper?
• Metode 3: Hvordan beskjære et bilde gjennom "objektposisjon" og "objekt-fit" -egenskaper?

Forutsetning: Opprette en HTML -fil

For å legge inn et bilde i HTML -dokumentet, følg de nevnte instruksjonene:

• Legg til en "”Tag for å opprette en divisjon og tilordne den en klasse”IMG-CROP-DIV”. Implementere “stil”Attributt til å sette elementets“margin”Eiendom.
• Bruk deretter HTML -taggen med “SRC”, “Bredde” og “Høyde” -attributter for å legge inn et bilde i dokumentet.
• “src”Attributt angir kilde -url.
• “bredde”Definerer bildens bredde.
• “høyde”Bestemmer bildens høyde.

Html

Det kan observeres at vi har lagt til bildet på websiden vår:

Metode 1: Hvordan beskjære et bilde gjennom “Overflow: Hidden” -egenskaper?

Når innholdet i elementet er for stort til å passe inn i det angitte området, "flyte”Eiendom er definert for å legge til rullefelt. Dessuten kan det også brukes til å beskjære det ekstra bildet.

For bedre forståelse, la oss style containeren vår.

Stil “img-crop-div” -klasse

“.IMG-CROP-DIV”Er definert for å få tilgang til klassen“IMG-CROP-DIV”. “høyde”Og“bredde”CSS -egenskaper brukes til å tildele bildeområdet. Deretter klippes det gjenværende området ved hjelp av "flyte”CSS -egenskap sammen med verdien”skjult”.

Produksjon

Juster plasseringen av beskåret bilde

Nå får vi se hvordan du justerer bildeposisjonen:

Ved å bruke “margin”Eiendom med de spesifiserte verdiene for topp, høyre, venstre og bunn hjalp oss med å justere stillingen.

Produksjon

Metode 2: Hvordan beskjære et bilde gjennom "bakgrunnsbilde" -egenskaper?

“bakgrunnsbilde”CSS -egenskap brukes til å spesifisere bakgrunnsbilder. Imidlertid kan et bilde beskjæres ved hjelp av denne eiendommen. For å gjøre det, sett først bredden og høyden på det som inneholder et bilde. Som et resultat vil bildet vises i det spesifiserte området.

La oss implementere det ovennevnte scenariet i CSS:

Her, "Bakgrunnsposisjon”Eiendom brukes til å justere startposisjonen til bildet.

Produksjon

Hvordan du beskjærer et bilde gjennom "objekt-fit" og "objektposisjon" -egenskaper?

CSS “Objekt-fit”Eiendom kan spesifiseres for å beskjære bilder enkelt. Den har fem verdier, men "dekke”Er den mest passende å bruke for å beskjære bilder.

I CSS, legg til følgende kodebit for "IMG-CROP-DIV”Klasse:

Her er beskrivelsen av de gitte egenskapene:

• Ved å bruke “Objekt-fit: Dekk”Eiendomsverdi, blir bildets aspektforhold opprettholdt mens du fremdeles passer inn i containerboksen.
• “objektposisjon”Eiendom setter bildens område til avling.

Produksjon

Vi har samlet metodene for å beskjære et bilde ved hjelp av CSS.

Konklusjon

For å beskjære et bilde i HTML, kan flere CSS -egenskaper brukes. De mest brukte egenskapene til avlingsbilder er “flyte”Med“bredde”Og“høyde”,“bakgrunnsbilde”,“Objekt-fit”, Og“objektposisjon”. Dette innlegget har beskrevet flere metoder for å beskjære et bilde ved hjelp av CSS.