object-positionVlastnost se používá ve spojení s object-fitnemovitostí a definuje, jak je prvek, jako je video nebo obraz umístěn s X / Y souřadnic uvnitř jeho obsahové krabice. Tato vlastnost přebírá dvě číselné hodnoty, například 0 10%nebo 0 10px. V těchto příkladech první číslo označuje, že obrázek by měl být umístěn nalevo od pole obsahu (0), druhý že by měl být umístěn 10% nebo 10px shora. Je také možné použít záporné hodnoty.
Výchozí hodnota pro object-positionje 50% 50%při použití object-fitvlastnosti na obrázku, takže ve výchozím nastavení jsou všechny obrázky umístěny ve středu pole s obsahem, například:
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ázka
Níže uvádíme několik příkladů, jak můžeme manipulovat object-positions obrazem s nastavenou object-fitvlastností none. Pokud obsah obrázku z jakéhokoli důvodu nevyplňuje pole obsahu, pak nevyplněný prostor zobrazí pozadí prvku, což může být barva nebo dokonce a background-image, jako v posledním příkladu:
Podívejte se na pozici pera od Robina Rendleho (@robinrendle) na CodePen.
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7,1 + * | 36+ | 26+ | ? | 4.4.4+ | 8,4 + * |
* Podpora pro, object-fitale neobject-position