Tárgy-helyzet - CSS-trükkök

A object-positiontulajdonságot a tulajdonsággal együtt használják, object-fités meghatározza, hogy egy elem, például egy videó vagy kép, X / Y koordinátákkal hogyan legyen elhelyezve a tartalomdobozában. Ez a tulajdonság két számértéket vesz fel, például 0 10%vagy 0 10px. Ezekben a példákban az első szám azt jelzi, hogy a képet a tartalom mező bal oldalán (0) kell elhelyezni, a második azt, hogy 10% -kal vagy 10px-rel felülről kell elhelyezni. Lehetséges negatív értékek is.

Az alapértelmezett érték az object-position, 50% 50%amikor a object-fittulajdonságot egy képen használja, így alapértelmezés szerint az összes kép a tartalom mező közepén helyezkedik el, így:

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

Demó

Az alábbiakban bemutatunk néhány példát arra, hogyan kezelhetjük a object-positionkép object-fittulajdonságait a beállított tulajdonsággal none. Ha a kép tartalma bármilyen okból nem tölti ki a tartalom mezőt, akkor a kitöltetlen hely megmutatja az elem hátterét, amely lehet szín vagy akár egy background-image, mint az utolsó példában:

Lásd Robin Rendle (@robinrendle) Pen Object pozícióját a CodePen-en.