object-positionĪpašums tiek izmantots kopā ar object-fitīpašuma un nosaka, kā elements, piemēram, video vai attēlu ir novietots ar X / Y koordinātas iekšpusē tās satura-box. Šim īpašumam ir divas skaitliskas vērtības, piemēram, 0 10%vai 0 10px. Šajos piemēros pirmais skaitlis norāda, ka attēls jānovieto satura lodziņa kreisajā pusē (0), otrais - 10% vai 10 pikseļu attālumā no augšas. Ir iespējams izmantot arī negatīvās vērtības.
Noklusējuma vērtība object-positionir 50% 50%, lietojot object-fitrekvizītu attēlā, lai visi attēli pēc noklusējuma būtu izvietoti to satura lodziņa centrā, piemēram:
img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )Demonstrācija
Zemāk ir daži piemēri, kā mēs varam manipulēt ar object-positionattēlu ar object-fitiestatīto rekvizītu none. Ja attēla saturs kāda iemesla dēļ neaizpilda satura lodziņu, neaizpildītajā vietā tiks parādīts elementa fons, kas var būt krāsa vai pat a background-image, kā parādīts pēdējā piemērā:
Skatiet Robina Rendles (@robinrendle) Pen Object pozīciju vietnē CodePen.
Pārlūkprogrammas atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7,1 + * | 36+ | 26+ | ? | 4.4.4+ | 8,4 + * |
* Atbalsts, object-fitbet neobject-position