CSS object-fit Property

🎯 ویژگی `object-fit` در CSS

ویژگی `object-fit` برای کنترل نحوه نمایش و **تطبیق اندازه محتوای جایگزین** (مثل تگ‌های `<img>` یا `<video>`) درون یک عنصر استفاده می‌شود. این ویژگی مشخص می‌کند که **محتوا چگونه باید درون جعبه (container) قرار بگیرد** — با حفظ نسبت ابعاد یا بدون آن.

—

 🔧 نحوه نوشتن

“`css
object-fit: fill | contain | cover | none | scale-down;
“`

—

🖼️ مثال ساده

“`html
<style>
img {
width: 300px;
height: 200px;
object-fit: cover;
}
</style>

<img src=“example.jpg” alt=“تصویر نمونه”>
“`

در این مثال، تصویر طوری نمایش داده می‌شود که **تمام فضای ۳۰۰ در ۲۰۰ پیکسل را پر کند**، در حالی که نسبت ابعادش حفظ شود؛ حتی اگر لازم باشد بخشی از تصویر بریده شود.

—

💡 چه زمانی از هر مقدار استفاده کنیم؟

* `cover`: مناسب برای تصویر پروفایل، بنرها یا تصاویر بندانگشتی (thumbnail)
* `contain`: برای نمایش کامل لوگو یا آیکون بدون برش خوردن
* `fill`: زمانی که برش یا تغییر نسبت ابعاد مهم نیست
* `none`: برای نمایش تصویر در اندازه واقعی
* `scale-down`: وقتی بخواهید تصویر فقط کوچک شود، نه بزرگ