نحوه مقیاس‌دهی و برش تصاویر با CSS object-fit

مقدمه

ویژگی object-fit در CSS مشخص می‌کند که یک تصویر یا ویدیو چگونه داخل کانتینر خود مقیاس‌دهی و برش داده شود، در حالی که نسبت تصویر (Aspect Ratio) حفظ می‌شود. برخلاف روش‌های سنتی تعیین اندازه در CSS که ممکن است تصویر را کشیده یا فشرده کنند، object-fit کنترل دقیقی روی نحوه نمایش تصویر می‌دهد:
می‌توانید تصویر را کامل داخل کانتینر جا دهید، کل فضا را پوشش دهید، یا بخش خاصی از تصویر را برش دهید.

object-fit چه مشکلی را حل می‌کند؟

وقتی روی یک تگ <img> عرض و ارتفاع مشخصی قرار می‌دهید که با نسبت اصلی تصویر متفاوت است، مرورگر به‌صورت پیش‌فرض تصویر را می‌کشد یا فشرده می‌کند.
object-fit جلوی این اعوجاج را می‌گیرد و تصویر را به‌صورت متناسب مقیاس می‌دهد و در صورت نیاز قسمت‌های اضافی را برش می‌دهد؛ مشابه کاری که background-size برای تصاویر پس‌زمینه انجام می‌دهد، اما این بار مستقیماً روی خود <img>.

چه زمانی باید از آن استفاده کنید؟

object-fit برای این موارد بسیار کاربردی است:

کارت‌ها (Card Layouts)
گالری تصاویر
تصاویر Hero
آواتار کاربران
Thumbnailها
طراحی‌های Responsive

به‌خصوص در Layoutهای مبتنی بر CSS Grid و Flexbox که اندازه کانتینر توسط Grid یا Flex تعیین می‌شود، نه ابعاد طبیعی تصویر.

در این آموزش یاد می‌گیرید:

هر پنج مقدار object-fit
fill
cover
contain
none
scale-down
ترکیب آن با object-position
کنترل دقیق محل برش تصویر
تفاوت object-fit و background-size
نکات کلیدی
object-fit فقط زمانی کار می‌کند که تصویر عرض و ارتفاع مشخص داشته باشد.
cover کل کانتینر را پر می‌کند و تصویر را برش می‌دهد.
contain کل تصویر را نمایش می‌دهد ولی ممکن است فضای خالی ایجاد شود.
object-position تعیین می‌کند کدام بخش تصویر هنگام برش دیده شود.
object-fit فقط روی عناصر جایگزین‌شونده مثل:
<img>
<video>
<iframe>
<embed>
کار می‌کند.
پشتیبانی مرورگرها بسیار خوب است، ولی Internet Explorer از آن پشتیبانی نمی‌کند.
این ویژگی تاثیری روی سرعت دانلود تصویر یا حجم فایل ندارد؛ فقط نحوه نمایش را کنترل می‌کند.
پیش‌نیازها

برای دنبال کردن این آموزش نیاز دارید به:

آشنایی پایه با CSS
یک ویرایشگر کد
مرورگر مدرن
درک نیاز به تعیین ابعاد

object-fit فقط زمانی عمل می‌کند که تصویر ابعاد مشخص داشته باشد.

روش‌های تعیین ابعاد
1. با HTML (پیشنهادی)
<img src=”image.jpg” width=”600″ height=”400″ alt=”Description”>
2. با CSS داخلی
<img src=”image.jpg” style=”width: 600px; height: 400px;”>
3. با فایل CSS
.image-container img {
width: 600px;
height: 400px;
}
چرا تعیین ابعاد مهم است؟

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

اگر فقط width مشخص شود و height روی auto باشد، تصویر نسبت طبیعی خود را حفظ می‌کند و object-fit عملاً بی‌اثر می‌شود.

بهترین روش

همیشه width و height را در HTML مشخص کنید تا از مشکل Cumulative Layout Shift (CLS) جلوگیری شود و تجربه کاربری بهتری داشته باشید.

رفتار پیش‌فرض تصاویر بدون object-fit

اگر نسبت تصویر با نسبت کانتینر یکی نباشد، مرورگر تصویر را می‌کشد یا فشرده می‌کند.

مثلاً:

<img
src=”image.jpg”
style=”width: 300px; height: 337px;”
>

در این حالت تصویر فشرده می‌شود و ظاهر آن خراب خواهد شد.

استفاده از object-fit: fill
img {
object-fit: fill;
}

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

کاربرد

تقریباً به‌ندرت استفاده می‌شود؛ مگر برای افکت‌های خاص.

استفاده از object-fit: cover
img {
object-fit: cover;
}

این مقدار:

نسبت تصویر را حفظ می‌کند
کل کانتینر را پر می‌کند
بخش‌های اضافی را برش می‌دهد
کاربردها
تصاویر Hero
کارت محصولات
Thumbnailها
آواتارها
مثال
.card-image {
width: 300px;
height: 200px;
object-fit: cover;
}
استفاده از object-fit: contain
img {
object-fit: contain;
}

در این حالت:

کل تصویر نمایش داده می‌شود
چیزی برش نمی‌خورد
ممکن است فضای خالی اطراف تصویر ایجاد شود
کاربردها
لوگوها
تصاویر محصول
نمودارها
تصاویر آموزشی
استفاده از object-fit: none
img {
object-fit: none;
}

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

کاربرد

برای طراحی‌های Pixel-perfect یا نمایش بخش خاصی از تصویر.

استفاده از object-fit: scale-down
img {
object-fit: scale-down;
}

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

کاربرد

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

کنترل محل برش با object-position

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

مثال
img {
object-fit: cover;
object-position: center top;
}
مقادیر قابل استفاده
کلیدی
top
bottom
left
right
center
درصدی
object-position: 20% 80%;
پیکسلی
object-position: 10px 20px;
مثال‌های واقعی
1. آواتار دایره‌ای
.avatar {
width: 80px;
height: 80px;
object-fit: cover;
object-position: center top;
border-radius: 50%;
}
2. گالری تصاویر
.gallery img {
width: 100%;
height: 250px;
object-fit: cover;
}
3. تصویر Hero
.hero-image {
width: 100%;
height: 60vh;
object-fit: cover;
}
تفاوت object-fit و background-size
از object-fit استفاده کنید وقتی:
تصویر محتوای اصلی است
SEO مهم است
Accessibility مهم است
نیاز به alt دارید
از background-size استفاده کنید وقتی:
تصویر تزئینی است
افکت‌های خاص می‌خواهید
چند لایه تصویر نیاز دارید
مشکلات رایج
object-fit کار نمی‌کند
مشکل
img {
width: 300px;
object-fit: cover;
}
راه‌حل
img {
width: 300px;
height: 200px;
object-fit: cover;
}
بخش مهم تصویر بریده می‌شود

از object-position استفاده کنید:

img {
object-position: center top;
}
فضای خالی با contain
.wrapper {
background: #f5f5f5;
}
نکات عملکرد و بهینه‌سازی
از فرمت‌های مدرن مثل WebP استفاده کنید
تصاویر Responsive بسازید
از loading=”lazy” استفاده کنید
ابعاد تصاویر را در HTML مشخص کنید
سوالات متداول
تفاوت cover و contain چیست؟
cover
کل کانتینر را پر می‌کند
ممکن است تصویر برش بخورد
contain
کل تصویر نمایش داده می‌شود
ممکن است فضای خالی ایجاد شود
آیا object-fit نسبت تصویر را حفظ می‌کند؟

بله؛ به‌جز مقدار fill.

آیا روی ویدیو هم کار می‌کند؟

بله:

<video style=”object-fit: cover;”></video>
چرا object-fit روی تصویر من کار نمی‌کند؟

معمولاً چون عرض و ارتفاع مشخص نشده‌اند.

نتیجه‌گیری

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

اگر می‌خواهید:

تصویر کل فضا را پر کند → cover
کل تصویر دیده شود → contain
محل برش را کنترل کنید → object-position

ترکیب این ویژگی‌ها باعث می‌شود طراحی‌های Responsive حرفه‌ای‌تر، تمیزتر و قابل‌کنترل‌تری داشته باشید.

از همراهی شما با پارمین کلود سپاسگزاریم.