Објект-положај - ЦСС-трикови

object-positionИмовина се користи у комбинацији са object-fitимовином и дефинише како се елемент као што је видео или слика је постављена са Кс / И координате унутар свом садржају кутије. Ово својство узима две нумеричке вредности, као што су 0 10%или 0 10px. У тим примерима, први број означава да слику треба поставити лево од оквира са садржајем (0), други да треба да буде постављен 10% или 10 пиксела од врха. Такође је могуће користити негативне вредности.

Подразумевана вредност за object-positionје 50% 50%када се користи object-fitсвојство на слици, тако да су подразумевано све слике постављене у средину оквира са садржајем, и то тако:

img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )

Демо

Испод је неколико примера како можемо манипулисати object-positionсликом са object-fitсвојством постављеним на none. Ако садржај слике из било ког разлога не попуни поље за садржај, тада ће непопуњени простор приказати позадину елемента, која може бити боја или чак background-image, као у последњем примеру:

Погледајте положај предмета оловке Робина Рендлеа (@робинрендле) на ЦодеПен-у.