Nogle gange er det nødvendigt at passe et billede ind i en bestemt given dimension. Vi kan ændre størrelsen på billedet ved at angive bredden og højden af et billede. En almindelig løsning er at bruge max-bredde: 100%; og højde: auto; så store billeder ikke overstiger bredden af deres beholder. Det max-bredde og max-højde egenskaber for CSS fungerer bedre, men de understøttes ikke i mange browsere.
En anden måde at ændre størrelsen på billedet på er ved at bruge objekttilpasning egenskab , som passer til billedet. Denne CSS-egenskab angiver, hvordan størrelsen på en video eller et billede ændres, så den passer til indholdsboksen. Den definerer, hvordan et element passer ind i beholderen med en fastlagt bredde og højde.
nummereret alfabet
Det objekttilpasning egenskab anvendes generelt på billede eller video. Denne egenskab definerer, hvordan et element reagerer på bredden og højden af dets beholder. Hovedsageligt er der fem værdier af objekttilpasning ejendom som f.eks fylde, indeholde, dække, ingen, nedskalere, initial , og arve . Standardværdien for denne egenskab er 'fylde' .
Eksempel
I dette eksempel ændrer vi størrelsen på billedet ved at bruge max-bredde: 100%; og højde: auto; ejendomme.
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 nu Produktion
Eksempel
I dette eksempel bruger vi objekttilpasning: dække; ejendom.
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 nu Produktion
I ovenstående eksempel har vi brugt dække over værdien af objekttilpasning ejendom. I lighed med ovenstående eksempel kan vi bruge de andre værdier af objekttilpasning egenskab for at ændre størrelsen på billedet.