تفاوت contain و 100% 100% در background-size چیست؟

در طراحی وب، کنترل اندازه تصاویر پس‌زمینه یکی از موارد مهم برای ایجاد تجربه کاربری مطلوب است. دو مقدار پرکاربرد در این زمینه، contain و 100% 100% هستند که هرکدام رفتار متفاوتی در نمایش تصویر دارند. درک تفاوت این دو به شما کمک می‌کند تا بسته به نیاز پروژه، انتخاب دقیق‌تری داشته باشید.

توضیح مفهومی

مقدار contain در CSS تضمین می‌کند که تصویر پس‌زمینه به طور کامل درون عنصر نمایش داده می‌شود، بدون برش یا تغییر نسبت ابعاد (aspect ratio). این یعنی تصویر تا حد ممکن بزرگ می‌شود اما همیشه تمام آن قابل مشاهده است.

در مقابل، 100% 100% تصویر را به طور کامل در عرض و ارتفاع عنصر کشیده و نسبت ابعاد اصلی را نادیده می‌گیرد. این ممکن است باعث تغییر شکل تصویر شود اما همیشه فضای تعیین شده را پر می‌کند.

کاربردهای عملی

contain: مناسب برای تصاویری که حفظ نسبت ابعاد آنها حیاتی است (مثل لوگوها یا تصاویر محصولات).
100% 100%: زمانی که نیاز به پر کردن کامل فضای عنصر دارید و تغییر شکل تصویر اهمیت چندانی ندارد (مثل پس‌زمینه‌های انتزاعی).

نمونه کدهای مرتبط

مثال ۱: استفاده از contain

.element {
  background-image: url('image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
}

مثال ۲: استفاده از 100% 100%

.element {
  background-image: url('image.jpg');
  background-size: 100% 100%;
}

مثال ۳: مقایسه عملی

/* تصویر با نسبت 16:9 در عنصری با نسبت 1:1 */
.contain-example { background-size: contain; } /* حاشیه‌های خالی ایجاد می‌کند */
.full-size-example { background-size: 100% 100%; } /* تصویر کشیده می‌شود */

خلاصه درس

contain همیشه تمام تصویر را نشان می‌دهد اما ممکن است حاشیه‌های خالی ایجاد کند.
100% 100% همیشه فضای عنصر را پر می‌کند اما ممکن است تصویر را مخدوش کند.
برای تصاویر با اهمیت بصری بالا، معمولاً contain انتخاب بهتری است.
در مواردی که پر کردن فضا اولویت دارد، 100% 100% می‌تواند مفید باشد.

انتخاب بین این دو مقدار بستگی به نیاز طراحی شما دارد. اگر حفظ کیفیت و نسبت تصویر مهم است، از contain استفاده کنید. اگر پر کردن کامل فضای عنصر بدون توجه به تغییر شکل تصویر مدنظر است، 100% 100% گزینه مناسب‌تری خواهد بود.

توسعه دهندگان

نیما جاهد