Ibland krävs det att en bild passar in i en viss given dimension. Vi kan ändra storlek på bilden genom att ange bredd och höjd på en bild. En vanlig lösning är att använda max-bredd: 100 %; och höjd: auto; så att stora bilder inte överstiger behållarens bredd. De maximal bredd och maximal höjd egenskaperna hos CSS fungerar bättre, men de stöds inte i många webbläsare.
Ett annat sätt att ändra storlek på bilden är att använda objektpassning egenskap , som passar bilden. Den här CSS-egenskapen anger hur storleken på en video eller bild ändras för att passa innehållsrutan. Den definierar hur ett element passar in i behållaren med en fastställd bredd och höjd.
mylivericket
De objektpassning egenskapen tillämpas vanligtvis på bild eller video. Den här egenskapen definierar hur ett element reagerar på bredden och höjden på dess behållare. Främst finns det fem värden på objektpassning egendom som t.ex fylla, innehålla, täcka, ingen, skala ner, initial , och ärva . Standardvärdet för den här egenskapen är 'fylla' .
Exempel
I det här exemplet ändrar vi storleken på bilden med hjälp av max-bredd: 100 %; och höjd: 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"> Testa det nu Produktion
Exempel
I det här exemplet använder vi objektpassning: täcka; fast egendom.
"kruskals algoritm"
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"> Testa det nu Produktion
I exemplet ovan har vi använt omslag värdet av objektpassning fast egendom. I likhet med exemplet ovan kan vi använda de andra värdena för objektpassning egenskap för att ändra storlek på bilden.