I HTML/CSS kan en bruker legge til et bilde, videoer eller lenker til et nettsted. Noen ganger har brukere imidlertid vanskeligheter med å endre størrelsen på bildet eller justere bildestørrelsen uten å strekke det. For dette formålet tillater CSS brukerne å bruke forskjellige egenskaper, for eksempel "Objekt-fit”CSS -eiendom. Denne egenskapen kan fylle bildestørrelsen uten å strekke seg.

Dette innlegget vil forklare:

• Hvordan legge til et bilde i HTML?
• Hvordan fylle CSS -bildestørrelse uten strekk?

Hvordan sette inn et bilde i HTML?

Bildene på HTML -siden kan festes på så mange måter. Imidlertid "”Tag er et av de hovedsakelig utnyttede elementene for å legge inn bilder.

Hvis brukeren ønsker å legge til et bilde på HTML -siden, kan du se på de medfølgende instruksjonene.

Trinn 1: Legg til overskrift

Først må du legge til en overskrift ved hjelp av "

" stikkord. Legg deretter til tekst mellom den spesifiserte overskriftstoden.

Trinn 2: Legg til bilde

Deretter setter du inn en "”Tag sammen med følgende attributter:

• “klasse”Attributt brukes til å få tilgang til elementet etter klassenavn.
• “src”Attributt brukes til å legge til bildebanen eller URL.
• “bredde”Angir størrelsen på bildet horisontalt.
• “høyde”Tildeler høyden på bildet:

Legg til bilde

Utgangen viser at bildet er lagt til vellykket:

Hvordan fylle CSS -bildestørrelse uten strekk?

For å fylle CSS -bildestørrelsen uten å strekke den, prøv de gitte instruksjonene.

Først får du tilgang til “”Element ved å bruke“.dekke”Og bruk følgende CSS -egenskaper:

.dekke
objekt-fit: deksel;
Bredde: 50px;
Margin: 20px;
Høyde: 100px;

Beskrivelsen av den ovennevnte koden er som følger:

• “Objekt-fit”Eiendom brukes til å spesifisere hvordan bildet skal endres for å passe til beholderen. For eksempel har vi satt verdien som "dekke”.
• “bredde”Angir størrelsen på bildebredden.
• “margin”Tildeler rommet rundt grensen til et element.
• “høyde”Definerer bildehøyden i en beholder.

Det kan observeres at bildet er endret og fylt uten å strekke seg:

Det handlet om å fylle bildet uten å strekke seg.

Konklusjon

For å fylle bildestørrelsen uten å strekke, legg først til et bilde ved hjelp av "”Tag sammen med klasseattributtet. Få tilgang til bildet ved hjelp av klassenavnet og bruk "Objekt-fit”CSS -eiendom som“dekke”. Bruk dessuten andre CSS -egenskaper for styling, for eksempel "bredde”,“høyde”, Og“margin”. Dette innlegget har vist metoden for å endre størrelse og fylle bildet uten å strekke seg.