object-positionObjekto yra naudojamas kartu su object-fitobjekto ir nurodo, kaip elementas, pavyzdžiui, vaizdo ar vaizdas yra išdėstyti su X / Y koordinačių jo turinio-akių viduje. Ši savybė turi dvi skaitines reikšmes, pvz., 0 10%Arba 0 10px. Tuose pavyzdžiuose pirmasis skaičius rodo, kad vaizdas turėtų būti dedamas kairėje turinio dėžutės (0), antrasis - 10% arba 10 taškų nuo viršaus. Taip pat galima naudoti neigiamas reikšmes.
Numatytoji reikšmė object-positionyra 50% 50%naudojant object-fitypatybę paveikslėlyje, kad pagal numatytuosius nustatymus visi vaizdai būtų išdėstyti turinio langelio centre, taip:
img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )Demonstracija
Toliau pateikiami keli pavyzdžiai, kaip mes galime manipuliuoti object-positionatvaizdu naudodami nustatytą object-fitsavybę none. Jei paveikslėlio turinys dėl kokios nors priežasties nepildo turinio laukelio, neužpildytoje vietoje bus rodomas elemento fonas, kuris gali būti spalvos ar net a background-image, kaip paskutiniame pavyzdyje:
Peržiūrėkite Robin Rendle (@robinrendle) „Pen Object“ padėtį „CodePen“.
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 31+ | 7,1 + * | 36+ | 26+ | ? | 4.4.4+ | 8,4 + * |
* Parama, object-fitbet neobject-position