Objektin sijainti - CSS-temppuja

object-positionOminaisuutta käytetään yhdessä object-fitomaisuutta ja määritellään, miten elementti, kuten video- tai kuva on sijoitettu X / Y-koordinaatit sisällä sen sisällön-box. Tämä ominaisuus ottaa kaksi numeerista arvoa, kuten 0 10%tai 0 10px. Näissä esimerkeissä ensimmäinen numero osoittaa, että kuva tulisi sijoittaa sisältöruudun (0) vasemmalle puolelle, toinen, että se tulisi sijoittaa 10% tai 10 kuvapistettä ylhäältä. On myös mahdollista käyttää negatiivisia arvoja.

Oletusarvo object-positionon, 50% 50%kun object-fitominaisuutta käytetään kuvassa, joten kaikki kuvat sijoitetaan oletusarvoisesti sisältölaatikkonsa keskelle, kuten:

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

Alla on muutama esimerkki siitä, miten voimme käsitellä object-positionkuvan object-fitominaisuudella asetettua ominaisuutta none. Jos kuvan sisältö ei täytä sisältöruutua jostain syystä, täyttämätön tila näyttää elementin taustan, joka voi olla väri tai jopa a background-image, kuten viimeisessä esimerkissä:

Katso Robin Rendlen (@robinrendle) kynäobjektin sijainti CodePenissä.