CSS De object-fit eigenschap
De CSS object-fit-eigenschap wordt gebruikt om aan te geven hoe een <img> of <video> moet worden aangepast aan de container.
De CSS object-fit eigenschap
De CSS object-fit-eigenschap wordt gebruikt om aan te geven hoe een <img> of <video> moet worden aangepast aan de container.
Deze eigenschap vertelt de inhoud om de container op verschillende manieren te vullen; zoals "behoud die beeldverhouding" of "rek uit en neem zoveel mogelijk ruimte in".
Kijk naar de volgende afbeelding uit Parijs. Deze afbeelding is 400 pixels breed en 300 pixels hoog:
Als we de afbeelding hierboven echter opmaken voor de helft van de breedte (200 pixels) en dezelfde hoogte (300 pixels), ziet het er als volgt uit:
Voorbeeld
img {
width: 200px;
height:
300px;
}
We zien dat de afbeelding wordt geplet om in de container van 200x300 pixels te passen (de oorspronkelijke beeldverhouding is vernietigd).
Hier komt de object-fiteigenschap binnen. De object-fiteigenschap kan een van de volgende waarden aannemen:
fill- Dit is standaard. Het formaat van de afbeelding wordt aangepast om de opgegeven dimensie te vullen. Indien nodig wordt de afbeelding uitgerekt of geplet om te passencontain- De afbeelding behoudt zijn hoogte-breedteverhouding, maar wordt aangepast om binnen de opgegeven afmeting te passencover- De afbeelding behoudt zijn beeldverhouding en vult de opgegeven dimensie. De afbeelding wordt bijgesneden om te passennone- Het formaat van de afbeelding wordt niet gewijzigdscale-down- de afbeelding wordt verkleind tot de kleinste versie vannoneorcontain
Object-fit gebruiken: bedekken;
Als we object-fit: cover;het beeld gebruiken, behoudt het zijn aspectverhouding en vult het de gegeven dimensie. De afbeelding wordt bijgesneden om te passen:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Object-fit gebruiken: bevatten;
Als we object-fit: contain;de afbeelding gebruiken, behoudt de beeldverhouding, maar wordt het formaat aangepast om binnen de opgegeven dimensie te passen:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Object-fit gebruiken: vul;
Als we object-fit: fill;de afbeelding gebruiken, wordt het formaat aangepast om de opgegeven dimensie te vullen. Indien nodig wordt de afbeelding uitgerekt of geplet om te passen:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Object-fit gebruiken: geen;
Als we object-fit: none;de afbeelding gebruiken, wordt het formaat niet gewijzigd:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: none;
}
Object-fit gebruiken: verkleinen;
Als we object-fit: scale-down;de afbeelding gebruiken, wordt deze verkleind tot de kleinste versie van noneof
contain:
Voorbeeld
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
Een ander voorbeeld
Hier hebben we twee afbeeldingen en we willen dat ze de breedte van 50% van het browservenster en 100% van de hoogte vullen.
In het volgende voorbeeld gebruiken we NIET object-fit, dus als we de grootte van het browservenster wijzigen, wordt de beeldverhouding van de afbeeldingen vernietigd:
Voorbeeld
In het volgende voorbeeld gebruiken we object-fit: cover;, dus wanneer we de grootte van het browservenster wijzigen, blijft de beeldverhouding van de afbeeldingen behouden:
Voorbeeld
CSS-object-fit Meer voorbeelden
Het volgende voorbeeld toont alle mogelijke waarden van de object-fiteigenschap in één voorbeeld:
Voorbeeld
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
CSS-object-* Eigenschappen
De volgende tabel bevat de CSS-object-*-eigenschappen:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |