آموزش استفاده از object-fit و object-position در CSS: تنظیم و قرارگیری تصاویر به‌صورت دقیق

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

آشنایی با ویژگی object-fit

ویژگی object-fit مشخص می‌کند که یک تصویر (یا سایر محتوای رسانه‌ای مانند ویدئو) چگونه در داخل ظرف (container) خود قرار بگیرد. این ویژگی به شما امکان می‌دهد تصویر را به گونه‌ای تنظیم کنید که متناسب با ابعاد ظرف باشد.

مقادیر رایج برای object-fit

• fill (پیش‌فرض): تصویر به طور کامل فضای ظرف را پر می‌کند و ممکن است تغییرات غیرمعمولی در نسبت تصویر ایجاد شود.

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

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

• none: تصویر در اندازه اصلی خود باقی می‌ماند و نسبت به ظرف تغییر نمی‌کند. ممکن است تصویر در ابعاد ظرف جا نشود.

• scale-down: تصویر مانند none یا contain رفتار می‌کند و آن را به اندازه کوچک‌تر محدود می‌کند.

مثال‌هایی از object-fit

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

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

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

در اینجا:

• image-fill تصویر را به طور کامل به اندازه باکس کشیده و نسبت تصویر را تغییر می‌دهد.

• image-contain تصویر را به گونه‌ای تغییر اندازه می‌دهد که کاملاً در داخل باکس قرار گیرد و فضای خالی باقی می‌ماند.

• image-cover تصویر را به گونه‌ای تغییر اندازه می‌دهد که باکس را پر کند، اما بخش‌هایی از تصویر ممکن است برش بخورند.

آشنایی با ویژگی object-position

ویژگی object-position مشخص می‌کند که تصویر چگونه در ظرف خود جای‌گذاری شود. این ویژگی به ویژه در مواردی که از object-fit: cover یا object-fit: contain استفاده می‌شود، کاربرد دارد. object-position به شما امکان می‌دهد که موقعیت تصویر را در داخل ظرف تغییر دهید.

نحوه استفاده از object-position

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

• 50% 50%: مرکز تصویر (پیش‌فرض).

• top, right, bottom, left: جهت‌های اصلی.

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

مثال‌هایی از object-position

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

.image-top {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: top;
}

.image-bottom-right {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: bottom right;
}

در اینجا:

• image-center تصویر را در مرکز باکس قرار می‌دهد.

• image-top تصویر را در بالای باکس قرار می‌دهد، به طوری که بخش‌های اضافی پایین تصویر ممکن است برش بخورند.

• image-bottom-right تصویر را در گوشه پایین سمت راست باکس قرار می‌دهد.

کاربردهای رایج object-fit و object-position در طراحی وب

ایجاد تصاویر بند انگشتی (Thumbnail)

برای ایجاد تصاویر بند انگشتی با برش خودکار، می‌توانید از ترکیب object-fit: cover و object-position: center استفاده کنید.

.thumbnail {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
}

در اینجا:

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

نمایش تصاویر پروفایل

در طراحی پروفایل‌ها، اغلب از دایره‌های بند انگشتی برای تصاویر استفاده می‌شود که نیاز به برش و مرکز قرار دادن تصویر دارد.

.profile-pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

در اینجا:

• تصویر به صورت دایره‌ای نمایش داده می‌شود و به طور خودکار مرکز تصویر نمایش داده می‌شود.

ایجاد بنرها و پس‌زمینه‌های تمام صفحه

برای ایجاد بنرهای تمام صفحه و پوشش‌دهنده باکس‌ها، از object-fit: cover و object-position: center استفاده کنید.

.banner {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

در اینجا:

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

نکات و بهترین شیوه‌ها برای استفاده از object-fit و object-position

• استفاده از object-fit: cover برای نمایش تمام صفحه: از این مقدار برای تصاویر و ویدئوهایی استفاده کنید که باید ظرف را به طور کامل بپوشانند، مانند بنرهای صفحه اصلی.

• مرکز قرار دادن تصاویر با object-position: center: برای حفظ تمرکز بر روی محتوای اصلی تصویر، از center برای قرار دادن تصویر در وسط ظرف استفاده کنید.

• استفاده از contain برای نمایش کامل تصاویر: در مواردی که می‌خواهید تصویر به طور کامل و بدون برش نمایش داده شود، از object-fit: contain استفاده کنید؛ این کار باعث می‌شود نسبت تصویر حفظ شود و هیچ بخشی از تصویر برش نخورد.

• تست در اندازه‌های مختلف صفحه: برای اطمینان از درست کار کردن object-fit و object-position، طراحی خود را در صفحه‌نمایش‌های مختلف تست کنید.

نتیجه‌گیری

ویژگی‌های object-fit و object-position در CSS ابزارهای بسیار مفیدی برای مدیریت تصاویر و دیگر محتوای رسانه‌ای در طراحی وب هستند. این ویژگی‌ها به شما کمک می‌کنند که تصاویر را به صورت تطبیق‌پذیر و با حفظ نسبت‌ها در باکس‌های محدود‌کننده قرار دهید و از مشکلاتی مانند برش ناخواسته یا تغییر نسبت تصویر جلوگیری کنید. استفاده هوشمندانه از این ویژگی‌ها به بهبود تجربه کاربری و افزایش جذابیت بصری صفحات وب کمک می‌کند.