CSS The object-position Property

* خاصیت `object-position`در CSS موقعیت قرارگیری محتوای درون یک عنصر جایگزین (مثل `<img>`، `<video>` یا `<object>`) را تعیین می‌کند، زمانی که محتوای درون آن از نظر اندازه کوچکتر یا بزرگتر از جعبه‌ی والد خود باشد.

* این خاصیت معمولاً همراه با خاصیت **`object-fit`** استفاده می‌شود، که نحوه‌ی تغییر اندازه یا جاگیری محتوا را مشخص می‌کند.

—

* مشخص می‌کند که کدام قسمت از محتوا داخل جعبه‌ی عنصر جایگزین نمایش داده شود.

* مقدار پیش‌فرض آن به صورت زیر است:

“`css

object-position: 50% 50%;

“`

که به معنی قرار گرفتن محتوا در مرکز جعبه از لحاظ افقی و عمودی است.

—

“`css

object-position: <موقعیت افقی> <موقعیت عمودی>;

“`

  * اندازه به واحدهای طولی مثل `px`، `em` و غیره

  * درصد مانند `%`

  * کلیدواژه‌هایی مثل `top` (بالا)، `bottom` (پایین)، `left` (چپ)، `right` (راست) و `center` (مرکز)

—

“`css

img {

  object-fit: cover;

  object-position: 50% 50%; /* یا به صورت center center */

}

“`

“`css

img {

  object-fit: cover;

  object-position: top left;

}

“`

“`css

img {

  object-fit: cover;

  object-position: 30px 10px;

}

“`

—

* وقتی بخواهیم تعیین کنیم که کدام قسمت از یک تصویر یا ویدیو هنگام استفاده از `object-fit` (مثلاً `cover` یا `contain`) نمایش داده شود.

* مخصوصاً زمانی که تصویر برش می‌خورد یا تغییر اندازه می‌دهد و می‌خواهیم روی بخش خاصی تمرکز کنیم.