Den object-positionegenskab bruges sammen med object-fitejendom og definerer, hvordan et element, såsom en video eller billede er placeret med X / Y koordinater inde dens indhold-box. Denne egenskab tager to numeriske værdier, såsom 0 10%eller 0 10px. I disse eksempler indikerer det første tal, at billedet skal placeres til venstre for indholdsfeltet (0), det andet, at det skal placeres 10% eller 10 px fra toppen. Det er også muligt at bruge negative værdier.
Standardværdien for object-positioner, 50% 50%når du bruger object-fitegenskaben på et billede, så alle billeder som standard er placeret i midten af deres indholdsboks, som sådan:
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
Nedenfor er et par eksempler på, hvordan vi kan manipulere object-positionet billede med object-fitegenskaben indstillet til none. Hvis billedets indhold ikke fylder indholdsfeltet af en eller anden grund, vil det uudfyldte rum vise elementets baggrund, som kan være en farve eller endda en background-image, som i det sidste eksempel:
Se Pen Object position af Robin Rendle (@robinrendle) på CodePen.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7,1 + * | 36+ | 26+ | ? | 4.4.4+ | 8,4 + * |
* Støtte til object-fitmen ikkeobject-position