🔹 Object Position چیه؟

وقتی از object-cover یا object-contain استفاده می‌کنیم، تصویر یا ویدیو داخل ظرف جا میشه.
اما بعضی وقتا می‌خوای مشخص کنی کدوم بخش تصویر دیده بشه (مثلاً وسط، بالا یا پایین).
اینجاست که object-position به کار میاد.

🔹 کلاس‌های Object Position در Tailwind

• object-bottom → تصویر از پایین تراز میشه.

• object-center → تصویر از وسط تراز میشه (پیش‌فرض).

• object-left → تصویر از سمت چپ تراز میشه.

• object-left-bottom → تصویر چپ-پایین.

• object-left-top → تصویر چپ-بالا.

• object-right → تصویر راست.

• object-right-bottom → تصویر راست-پایین.

• object-right-top → تصویر راست-بالا.

• object-top → تصویر بالا.

🔹 مثال (object-center)

<div class="w-40 h-40 border bg-gray-100">
  <img src="https://via.placeholder.com/300x150" class="object-cover object-center w-full h-full">
</div>

📌 تصویر از وسط کراپ میشه.

🔹 مثال (object-top)

<div class="w-40 h-40 border bg-gray-100">
  <img src="https://via.placeholder.com/300x150" class="object-cover object-top w-full h-full">
</div>

📌 تصویر از بالای ظرف کراپ میشه.

🔹 مثال (object-left-bottom)

<div class="w-40 h-40 border bg-gray-100">
  <img src="https://via.placeholder.com/300x150" class="object-cover object-left-bottom w-full h-full">
</div>

📌 تصویر از گوشه چپ-پایین ظرف کراپ میشه.

🔹 ترکیب Object Fit + Object Position

<div class="w-40 h-40 border bg-gray-100">
  <img src="https://via.placeholder.com/300x150" class="object-contain object-right-top w-full h-full">
</div>

📌 اینجا تصویر داخل ظرف جا میشه (contain) و از گوشه راست-بالا تراز میشه.

🔹 نکته مهم

• object-position فقط وقتی معنی داره که ابعاد تصویر با ظرف هماهنگ نباشه.

• معمولاً همراه با object-cover و object-contain استفاده میشه.

• می‌تونی با Responsive Prefix هم استفاده کنی:

  • sm:object-top

  • md:object-center

  • lg:object-bottom