Objekt-položaj - CSS-triki | Almanah CSS 2025

object-positionLastnost se uporablja v povezavi z object-fitlastnino in določa, kako je element, kot je video ali sliko postavljenih s koordinatami X / Y znotraj njenega vsebinsko prostora. Ta lastnost ima dve številski vrednosti, na primer 0 10%ali 0 10px. V teh primerih prva številka pomeni, da je treba sliko postaviti levo od polja z vsebino (0), druga pa, da mora biti postavljena 10% ali 10px od vrha. Možna je tudi uporaba negativnih vrednosti.

Privzeta vrednost za object-positionje 50% 50%pri uporabi object-fitlastnosti na sliki, tako da so privzeto vse slike postavljene v sredino polja z vsebino, tako:

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

Spodaj je nekaj primerov, kako lahko object-positions sliko object-fitnastavimo lastnost none. Če vsebina slike iz katerega koli razloga ne zapolni polja z vsebino, bo neizpolnjen prostor prikazal ozadje elementa, ki je lahko barvno ali celo background-image, kot v zadnjem primeru:

Oglejte si položaj predmeta Pero Robina Rendleja (@robinrendle) na CodePenu.