De object-fiteigenschap definieert hoe een element reageert op de hoogte en breedte van zijn inhoudsvak. Het is bedoeld voor afbeeldingen, video's en andere insluitbare media-indelingen in combinatie met de object-positioneigenschap. Als het op zichzelf wordt gebruikt, object-fitkunnen we een inline afbeelding bijsnijden door ons fijnmazige controle te geven over hoe het in zijn doos drukt en uitrekt.
object-fit kan worden ingesteld met een van deze vijf waarden:
fill: dit is de standaardwaarde waarmee de afbeelding wordt uitgerekt om in het inhoudsvak te passen, ongeacht de aspectverhouding.contain: vergroot of verkleint de grootte van de afbeelding om het vak te vullen met behoud van de aspectverhouding.cover: de afbeelding vult de hoogte en breedte van de doos, waarbij opnieuw de beeldverhouding wordt behouden, maar waarbij de afbeelding vaak wordt bijgesneden.none: afbeelding negeert de hoogte en breedte van de ouder en behoudt zijn oorspronkelijke grootte.scale-down: de afbeelding vergelijkt het verschil tussennoneencontainom de kleinste betonnen objectgrootte te vinden.
Dit is hoe we die eigenschap zouden kunnen instellen:
img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )
Omdat de tweede afbeelding een andere hoogte-breedteverhouding heeft dan de originele afbeelding aan de linkerkant, zal deze buiten het bereik van het inhoudsvak uitrekken en de boven- en onderkant van de afbeelding bijsnijden.
Het is vermeldenswaard dat de afbeelding standaard gecentreerd is in het inhoudsvak, maar dit kan worden gewijzigd met de object-positioneigenschap.
Demo
De onderstaande demo toont vijf voorbeelden waarin wordt uitgelegd hoe we zouden willen dat een afbeelding in een inhoudsvak wordt gedrukt dat soms kleiner of groter is dan de oorspronkelijke breedte (pas de grootte van de browser aan voor een beter idee van hoe dit zou kunnen werken):
Zie de Pen object-fit door Robin Rendle (@robinrendle) op CodePen.
Als de inhoud van de afbeelding om wat voor reden dan ook het inhoudsvak niet vult, zal de niet-gevulde ruimte de achtergrond van het element tonen, in dit geval een lichtgrijze achtergrond.
Browser-ondersteuning
Het is vermeldenswaard dat iOS 8-9.3 en Safari 7-9.1 het object-fiteigendom zijn, maar niet object-position.
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 32 | 36 | Nee | 79 | 10 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.0-10.2 |