Objekt-posisjon - CSS-triks | CSS-almanakk 2025

Den object-positionegenskapen er brukt i forbindelse med object-fiteiendom og definerer hvordan et element slik som en video eller bilde er plassert med X / Y-koordinater på innsiden av dens innhold kassen. Denne egenskapen tar to numeriske verdier, for eksempel 0 10%eller 0 10px. I disse eksemplene indikerer det første tallet at bildet skal plasseres til venstre for innholdsboksen (0), det andre at det skal plasseres 10% eller 10 px fra toppen. Det er også mulig å bruke negative verdier.

Standardverdien for object-positioner 50% 50%når du bruker object-fiteiendommen på et bilde, slik at alle bilder som standard er plassert i midten av innholdsboksen, slik som:

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 noen eksempler på hvordan vi kan manipulere object-positionet bilde med object-fitegenskapen satt til none. Hvis innholdet i bildet ikke fyller innholdsboksen av en eller annen grunn, vil det ufylte rommet vise elementets bakgrunn, som kan være en farge eller til og med en background-image, som i det siste eksemplet:

Se pennobjektets posisjon av Robin Rendle (@robinrendle) på CodePen.