این ویژگی مشخص می‌کنه که نقطه مرجع (focus point) محتوای تصویر یا ویدیو درون container کجا باشه.
به‌ویژه وقتی از object-fit: cover یا object-fit: none استفاده می‌کنیم، خیلی کاربردی میشه.

🔹 سینتکس کلی

img {
  object-fit: cover;
  object-position: 50% 50%; /* مقدار پیش‌فرض: وسط */
}

🔹 مقادیر قابل استفاده

1. مقادیر کلیدی (keywords)

• top – تصویر از بالا چیدمان میشه.

• bottom – تصویر از پایین.

• left – تصویر از سمت چپ.

• right – تصویر از سمت راست.

• center – تصویر از وسط (پیش‌فرض).

مثال:

img {
  object-fit: cover;
  object-position: top;
}

2. مقادیر درصدی (%)

• 0% 0% → چپ بالا

• 100% 0% → راست بالا

• 0% 100% → چپ پایین

• 100% 100% → راست پایین

• 50% 50% → وسط

مثال:

img {
  object-fit: cover;
  object-position: 20% 80%; /* کمی از چپ و پایین نمایش بده */
}

3. مقادیر طولی (px, em, rem, …)

می‌تونیم دقیق بگیم چند پیکسل جابه‌جا بشه:

img {
  object-fit: cover;
  object-position: 30px 10px;
}

📌 نکات مهم

• همیشه برای کنترل بهتر، object-fit + object-position با هم استفاده میشن.

• مخصوصاً در طراحی کارت محصول یا پروفایل کاربر که تصویر باید روی بخش خاصی فوکوس بشه (مثلاً صورت کاربر).