Objekt-položaj - CSS-trikovi

object-positionObjekt se koristi u sprezi s object-fitimovine i određuje kako element kao što je video ili slike pozicioniran s X / Y koordinate unutar svojih sadržaja kutije. Ovo svojstvo uzima dvije numeričke vrijednosti, poput 0 10%ili 0 10px. U tim primjerima prvi broj označava da sliku treba smjestiti s lijeve strane okvira sa sadržajem (0), drugi da treba biti smješten 10% ili 10 piksela od vrha. Također je moguće koristiti negativne vrijednosti.

Zadana vrijednost za object-positionje 50% 50%kada se koristi object-fitimovinu na sliku, tako da je po defaultu sve slike se nalaze u središtu njihove kutije sadržaja, ovako:

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

Ispod je nekoliko primjera kako možemo manipulirati object-positionslikom sa object-fitsvojstvom postavljenim na none. Ako sadržaj slike iz bilo kojeg razloga ne popuni okvir sa sadržajem, tada će nepopunjeni prostor prikazati pozadinu elementa, koja može biti boja ili čak background-image, kao u posljednjem primjeru:

Pogledajte položaj predmeta olovke Robina Rendlea (@robinrendle) na CodePenu.