Den object-positionegenskap används i förening med object-fitegendom och definierar hur ett element såsom en video- eller bild är positionerad med X / Y-koordinater inuti dess innehåll-box. Den här egenskapen tar två numeriska värden, till exempel 0 10%eller 0 10px. I dessa exempel indikerar den första siffran att bilden ska placeras till vänster om innehållsrutan (0), den andra att den ska placeras 10% eller 10 px uppifrån. Det är också möjligt att använda negativa värden.
Standardvärdet för object-positionär 50% 50%när du använder object-fitegenskapen på en bild, så att alla bilder som standard är placerade i mitten av innehållsrutan, som så:
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
Nedan följer några exempel på hur vi kan manipulera object-positionen bild med object-fitegenskapen inställd på none. Om innehållet i bilden inte fyller innehållsrutan av någon anledning kommer det ofyllda utrymmet att visa elementets bakgrund, som kan vara en färg eller till och med en background-image, som i det sista exemplet:
Se Pen Object position av Robin Rendle (@robinrendle) på CodePen.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7,1 + * | 36+ | 26+ | ? | 4.4.4+ | 8,4 + * |
* Stöd för object-fitmen inteobject-position