اگر هنگام طراحی سایت با مشکل نمایش تصاویر در اندازه‌های مختلف مواجه شده باشید، احتمالاً نام object-fit در CSS را شنیده‌اید. این ویژگی یکی از کاربردی ترین ابزارهای CSS برای کنترل نحوه نمایش تصاویر و ویدیوها داخل یک عنصر است، در ادامه آموزش ویژگی object-fit در CSS را بیشتر توضیح میدم .

بسیاری از طراحان وب هنگام ساخت گالری تصاویر، اسلایدرها، کارت محصولات و بخش‌های مختلف سایت با این چالش رو به رو می‌شوند که تصویر یا ویدیو بدون به‌هم ریختگی و با ظاهری مناسب نمایش داده شود. اینجاست که object-fit در CSS به کمک ما می‌آید.

در آموزش object-fit در css با تمام حالات آشنا می‌شویم و برای هر حالت مثال های عملی ارائه خواهیم کرد.

ویژگی object-fit در CSS چیست؟

ویژگی object-fit در CSS مشخص می‌کند که محتوای یک عنصر مانند تصویر (img) یا ویدیو (video) چگونه در فضای تعیین شده قرار بگیرد.

نکته مهم: ویژگی object-fit فقط روی عناصر جایگزین‌شونده (replaced elements) اثر می‌گذارد؛ یعنی تصاویر، ویدیوها، iframeها و مشابه آن‌ها. پس از این خاصیت برای مدیریت نمایش تصاویر در گالری‌ها، اسلایدرها و کارت‌های محصول استفاده کنید.

فرض کنید یک تصویر دارید که اندازه واقعی آن با ابعاد کادر نمایش متفاوت است. با استفاده از object-fit می‌توانید تعیین کنید تصویر:

• کشیده شود
• برش بخورد
• کاملاً نمایش داده شود
• بدون تغییر باقی بماند

ساختار کلی این ویژگی به شکل زیر است:

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

مقادیر قابل استفاده در object-fit

ویژگی object-fit در CSS دارای ۵ مقدار اصلی است:

object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

در ادامه هرکدام را به‌صورت کامل بررسی می‌کنیم.

1. مقدار fill

این مقدار حالت پیش فرض object-fit است.

در حالت fill تصویر دقیقاً در ابعاد عنصر قرار می‌گیرد؛ حتی اگر نسبت طول و عرض تصویر به هم بخورد.

مثال

<img src="image.jpg" class="img-fill">

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

نتیجه

• تصویر تمام فضای کادر را پر می‌کند.
• احتمال کشیدگی و تغییر شکل تصویر وجود دارد.
• نسبت ابعاد اصلی تصویر حفظ نمی‌شود.

کاربرد

زمانی که پر شدن کامل کادر مهم تر از حفظ تناسب تصویر باشد.

2. مقدار contain

یکی از پرکاربردترین حالت‌های object-fit در CSS مقدار contain است.

در این حالت تصویر به‌گونه‌ای تغییر اندازه می‌دهد که به طور کامل داخل کادر قرار بگیرد.

مثال

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

نتیجه

• کل تصویر نمایش داده می‌شود.
• نسبت تصویر حفظ می‌شود.
• ممکن است فضای خالی اطراف تصویر ایجاد شود.

کاربرد

برای نمایش لوگوها، تصاویر محصولات و تصاویری که نباید هیچ بخشی از آن‌ها حذف شود.

3. مقدار cover

محبوب‌ترین مقدار object-fit معمولاً cover است.

در این حالت تصویر کل فضای عنصر را پوشش می‌دهد و نسبت ابعاد آن حفظ می‌شود.

مثال

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

نتیجه

• کل کادر پر می‌شود.
• نسبت تصویر حفظ می‌شود.
• ممکن است بخشی از تصویر برش بخورد.

کاربرد

مناسب برای:

• تصاویر شاخص مقالات
• اسلایدرها
• گالری تصاویر
• کارت محصولات

نمونه عملی کارت محصول

<div class="card">
    <img src="product.jpg">
</div>

.card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

این روش باعث می‌شود تمام تصاویر محصولات با ابعاد یکسان نمایش داده شوند.

4. مقدار none

در حالت none هیچ تغییری روی تصویر اعمال نمی‌شود.

مثال

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

نتیجه

• تصویر با اندازه اصلی خود نمایش داده می‌شود.
• اگر بزرگ‌تر از کادر باشد بخشی از آن خارج می‌شود.
• هیچ تغییر اندازه‌ای انجام نمی‌شود.

کاربرد

زمانی که می‌خواهید تصویر دقیقاً با ابعاد واقعی خود نمایش داده شود.

5. مقدار scale-down

این مقدار ترکیبی از none و contain است.

مرورگر بررسی می‌کند کدام حالت فضای کمتری اشغال می‌کند و همان را انتخاب می‌کند.

مثال

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

نتیجه

• اگر تصویر بزرگ باشد کوچک می‌شود.
• اگر کوچک باشد در اندازه اصلی باقی می‌ماند.
• نسبت تصویر حفظ می‌شود.

کاربرد

برای تصاویر با ابعاد متغیر که نمی‌خواهید بزرگ‌نمایی شوند.

مقایسه سریع حالت‌های object-fit

مقدار	حفظ نسبت تصویر	پر شدن کامل کادر	احتمال برش
fill	❌	✅	❌
contain	✅	❌	❌
cover	✅	✅	✅
none	✅	❌	❌
scale-down	✅	❌	❌

تفاوت cover و contain

بسیاری از افراد هنگام استفاده از ویژگی object-fit در CSS بین cover و contain دچار سردرگمی می‌شوند.

contain

object-fit: contain;

• کل تصویر نمایش داده می‌شود.
• ممکن است فضای خالی ایجاد شود.

cover

object-fit: cover;

• کل کادر پر می‌شود.
• ممکن است بخشی از تصویر حذف شود.

اگر نمایش کامل تصویر اهمیت دارد از contain استفاده کنید و اگر زیبایی و پر شدن کامل کادر مهم است cover انتخاب بهتری خواهد بود.

استفاده از object-position همراه object-fit

برای کنترل محل برش تصویر می‌توانید از ویژگی object-position استفاده کنید.

مثال

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

یا:

object-position:top;

object-position:bottom;

object-position:left;

object-position:right;

این ویژگی به شما اجازه می‌دهد تعیین کنید کدام بخش تصویر در هنگام برش نمایش داده شود.

مرورگرهای پشتیبانی کننده

ویژگی object-fit در تمامی مرورگرهای مدرن پشتیبانی می‌شود:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari
• Opera

بنابراین برای پروژه‌های امروزی می‌توانید با خیال راحت از آن استفاده کنید.

جمع‌بندی

ویژگی object-fit در CSS یکی از بهترین ابزارها برای مدیریت تصاویر و ویدیوها در طراحی وب است. با استفاده از این ویژگی می‌توانید بدون نیاز به ویرایش تصاویر، نحوه نمایش آن‌ها را کنترل کنید.

اگر بخواهیم کاربرد هر حالت را به صورت خلاصه بیان کنیم:

• fill: پر کردن کامل کادر بدون حفظ تناسب
• contain: نمایش کامل تصویر
• cover: پر کردن کامل کادر با حفظ تناسب
• none: نمایش در اندازه اصلی
• scale-down: کوچک شدن در صورت نیاز

در اکثر پروژه‌های مدرن، مقدار cover بیشترین استفاده را دارد و برای تصاویر شاخص، گالری‌ها و محصولات فروشگاهی انتخاب مناسبی محسوب می‌شود.