🔹 Object Fit چیه؟

خاصیت object-fit در CSS تعیین می‌کنه که محتوای یک المان (مثل تصویر یا ویدیو) چطور داخل جعبه (container) خودش جا بشه.
این ویژگی برای کنترل نمایش تصاویر وقتی ابعادشون با ظرف هماهنگ نیست خیلی کاربردیه.

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

• object-contain → تصویر/ویدیو داخل ظرف جا میشه بدون برش (ممکنه فضای خالی بمونه).

• object-cover → تصویر کل ظرف رو می‌پوشونه (ممکنه بخشی از تصویر بریده بشه).

• object-fill → تصویر برای پر کردن ظرف کشیده میشه (ممکنه تناسبش بهم بخوره).

• object-none → تصویر بدون تغییر سایز، در ظرف قرار می‌گیره (ممکنه بیرون بزنه).

• object-scale-down → تصویر کوچیک میشه تا توی ظرف جا بشه (ترکیب contain و none).

🔹 مثال (object-contain)

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

📌 تصویر بدون برش نمایش داده میشه ولی ممکنه فضای خالی اطرافش باشه.

🔹 مثال (object-cover)

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

📌 تصویر کل ظرف رو پر می‌کنه، ولی بخشی ازش بریده میشه.

🔹 مثال (object-fill)

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

📌 تصویر برای پر کردن ظرف کشیده میشه، حتی اگه تناسبش خراب بشه.

🔹 مثال (object-scale-down)

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

📌 تصویر یا در سایز اصلی میاد یا کوچیک میشه تا توی ظرف جا بشه.

🔹 نکته مهم

• برای کاورهای تمام‌صفحه (hero sections) معمولاً از object-cover استفاده میشه.

• برای تصاویر محصول و آیکون‌ها که تناسب مهمه، object-contain بهتره.

• Tailwind اجازه میده با Responsive Prefix هم استفاده کنی:

  • sm:object-contain

  • md:object-cover