Soms is het nodig om een ​​afbeelding in een bepaalde dimensie te passen. We kunnen het formaat van de afbeelding wijzigen door de breedte en hoogte van een afbeelding op te geven. Een veel voorkomende oplossing is het gebruik van de maximale breedte: 100%; En hoogte: automatisch; zodat grote afbeeldingen de breedte van hun container niet overschrijden. De Maximale wijdte En maximale hoogte eigenschappen van CSS werken beter, maar worden in veel browsers niet ondersteund.

Een andere manier om het formaat van de afbeelding te wijzigen is door gebruik te maken van de object-fit eigenschap , die bij het beeld past. Deze CSS-eigenschap geeft aan hoe het formaat van een video of afbeelding wordt aangepast zodat deze in het inhoudsvak past. Het definieert hoe een element in de container past met een vastgestelde breedte en hoogte.

ffilms

De object-fit eigenschap wordt over het algemeen toegepast op afbeeldingen of video. Deze eigenschap definieert hoe een element reageert op de breedte en hoogte van zijn container. Er zijn voornamelijk vijf waarden van object-fit eigendommen zoals vullen, bevatten, bedekken, geen, verkleinen, initiaal , En je erft . De standaardwaarde van deze eigenschap is 'vullen' .

Voorbeeld

In dit voorbeeld passen we het formaat van de afbeelding aan met behulp van de maximale breedte: 100%; En hoogte: automatisch; eigenschappen.

 cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> 

Uitvoer

Voorbeeld

In dit voorbeeld gebruiken we de passend bij object: deksel; eigendom.

Java-afdruk

 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"> 

Uitvoer

In het bovenstaande voorbeeld hebben we de omslag waarde van de object-fit eigendom. Net als in het bovenstaande voorbeeld kunnen we de andere waarden van de object-fit eigenschap om het formaat van de afbeelding te wijzigen.