Táto object-positionvlastnosť sa používa v spojení s object-fitvlastnosťou a definuje, ako je prvok ako video alebo obrázok umiestnený so súradnicami X / Y vo vnútri poľa obsahu. Táto vlastnosť nadobúda dve číselné hodnoty, napríklad 0 10%alebo 0 10px. V týchto príkladoch prvé číslo označuje, že obrázok by mal byť umiestnený vľavo od políčka s obsahom (0), druhé, že by mal byť umiestnený 10% alebo 10px zhora. Je tiež možné použiť záporné hodnoty.
Predvolená hodnota pre object-positionje 50% 50%pri použití object-fitvlastnosti na obrázku, takže všetky obrázky sú predvolene umiestnené v strede poľa s obsahom, napríklad takto:
img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )Ukážka
Ďalej uvádzame niekoľko príkladov, ako môžeme manipulovať object-positions obrázkom s nastavenou object-fitvlastnosťou none. Ak obsah obrázka z akýchkoľvek dôvodov nevyplní obsahové políčko, potom sa na nevyplnenom mieste zobrazí pozadie prvku, ktoré môže byť farebné alebo dokonca a background-image, ako v poslednom príklade:
Pozrite si pozíciu objektu Pen od Robina Rendleho (@robinrendle) na stránke CodePen.
Podpora prehliadača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7,1 + * | 36+ | 26+ | ? | 4.4.4+ | 8,4 + * |
* Podpora pre, object-fitale nieobject-position