De object-positioneigenschap wordt gebruikt in combinatie met de object-fiteigenschap en definieert hoe een element, zoals een video of afbeelding, wordt gepositioneerd met X / Y-coördinaten in het inhoudsvak. Deze eigenschap heeft twee numerieke waarden, zoals 0 10%of 0 10px. In die voorbeelden geeft het eerste cijfer aan dat de afbeelding links van het inhoudsvak (0) moet worden geplaatst, het tweede dat deze 10% of 10 px vanaf de bovenkant moet worden geplaatst. Het is ook mogelijk om negatieve waarden te gebruiken.
De standaardwaarde voor object-positionis 50% 50%wanneer de object-fiteigenschap op een afbeelding wordt gebruikt, zodat standaard alle afbeeldingen in het midden van hun inhoudsvak worden geplaatst, zoals:
img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )Demo
Hieronder staan een paar voorbeelden van hoe we de object-positionafbeelding van een afbeelding kunnen manipuleren met de object-fiteigenschap ingesteld op none. 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, wat een kleur of zelfs een kan zijn background-image, zoals in het laatste voorbeeld:
Zie de positie van het penobject door Robin Rendle (@robinrendle) op CodePen.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7.1 + * | 36+ | 26+ | | 4.4.4+ | 8.4 + * |
* Ondersteuning voor object-fitmaar nietobject-position