Noen ganger er det nødvendig å passe et bilde inn i en viss gitt dimensjon. Vi kan endre størrelsen på bildet ved å spesifisere bredden og høyden på et bilde. En vanlig løsning er å bruke maks-bredde: 100 %; og høyde: auto; slik at store bilder ikke overskrider bredden på beholderen. De maks bredde og maks-høyde egenskapene til CSS fungerer bedre, men de støttes ikke i mange nettlesere.
En annen måte å endre størrelse på bildet på er å bruke objekttilpasning egenskap , som passer til bildet. Denne CSS-egenskapen spesifiserer hvordan størrelsen på en video eller et bilde skal tilpasses innholdsboksen. Den definerer hvordan et element passer inn i beholderen med en etablert bredde og høyde.
nummerert alfabet
De objekttilpasning egenskap brukes vanligvis til bilde eller video. Denne egenskapen definerer hvordan et element reagerer på bredden og høyden på beholderen. Hovedsakelig er det fem verdier av objekttilpasning eiendom som f.eks fylle, inneholde, dekke, ingen, nedskalere, initial , og arve . Standardverdien for denne egenskapen er 'fylle' .
Eksempel
I dette eksemplet endrer vi størrelsen på bildet ved å bruke maks-bredde: 100 %; og høyde: auto; egenskaper.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Test det nå Produksjon
Eksempel
I dette eksemplet bruker vi objekttilpasning: cover; eiendom.
div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> Test det nå Produksjon
I eksemplet ovenfor har vi brukt dekke verdien av objekttilpasning eiendom. I likhet med eksemplet ovenfor kan vi bruke de andre verdiene til objekttilpasning egenskapen for å endre størrelsen på bildet.