Obiect-poziție - CSS-Tricks | Almanah CSS 2025

object-positionProprietatea este utilizat împreună cu object-fitproprietatea și definește modul în care un element , cum ar fi un video sau imagine este poziționată cu coordonatele X / Y în interiorul său conținut-box. Această proprietate ia două valori numerice, cum ar fi 0 10%sau 0 10px. În aceste exemple, primul număr indică faptul că imaginea trebuie plasată în stânga casetei de conținut (0), al doilea că ar trebui poziționată la 10% sau 10 px de sus. De asemenea, este posibil să se utilizeze valori negative.

Valoarea implicită pentru object-positioneste 50% 50%atunci când se utilizează object-fitproprietatea pe o imagine, astfel încât în mod implicit toate imaginile sunt poziționate în centrul casetei de conținut, astfel:

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

Mai jos sunt câteva exemple cu privire la modul în care putem manipula object-positionimaginea cu object-fitproprietatea setată la none. Dacă conținutul imaginii nu umple caseta de conținut din orice motiv, spațiul neumplut va afișa fundalul elementului, care poate fi o culoare sau chiar o background-image, ca în ultimul exemplu:

Vedeți poziția Pen Object de Robin Rendle (@robinrendle) pe CodePen.