این ویژگی مشخص می‌کنه که محتوای یک تصویر (img) یا ویدیو (video) داخل container خودش چطور مقیاس‌دهی یا برش بخوره.
معمولاً همراه با ویژگی‌های width و height استفاده میشه.

🔹 مقادیر object-fit

1. fill (پیش‌فرض)

تصویر کشش پیدا می‌کنه تا کاملاً در container جا بشه (ممکنه نسبت تصویر خراب بشه).

img {
  width: 300px;
  height: 200px;
  object-fit: fill;
}

2. contain

تصویر کاملاً دیده میشه و بدون برش داخل container جا میشه.
(اگر ابعاد container متفاوت باشه، فضای خالی باقی می‌مونه).

img {
  width: 300px;
  height: 200px;
  object-fit: contain;
}

3. cover

تصویر کل container رو پر می‌کنه.
اگر ابعاد سازگار نباشه، تصویر برش می‌خوره اما هیچ فضای خالی باقی نمی‌مونه.

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

4. none

تصویر در اندازه اصلی خودش نمایش داده میشه.
container ممکنه تصویر رو کامل نشون نده.

img {
  width: 300px;
  height: 200px;
  object-fit: none;
}

5. scale-down

تصویر رو بین none و contain انتخاب می‌کنه؛ هرکدوم که کوچیک‌تر باشه.

img {
  width: 300px;
  height: 200px;
  object-fit: scale-down;
}

📌 نکات مهم

• معمولاً برای گالری تصاویر، کارت‌های محصول، یا ویدیوها استفاده میشه.

• خیلی شبیه به background-size (cover / contain) عمل می‌کنه، فقط برای محتوا (content) نه پس‌زمینه.