ویژگی object-fit

از موتو کد، دانشنامهٔ برنامه‌نویسی

ویژگی object-fit مشخص می کند که یک <img> یا <video> پگونه باید تغییر اندازه دهد تا متناسب با اندازه عنصر نگهدارنده خود شود.[۱]

پشتیبانی مرورگر[ویرایش | ویرایش]

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

ویژگی Chrome Internet Explorer / Edge Firefox Safari Opera
object-fit ۳۱٫۰ ۱۶٫۰ ۳۶٫۰ ۷٫۱ ۱۹٫۰

ویژگی object-fit در CSS[ویرایش | ویرایش]

ویژگی object-fit برای مشخص کردن مقداری که یک <img> یا <video> می‌بایست تغییر سایز دهد تا متناسب با عنصر نگه دارنده خود شود را مشخص می‌کند.

این ویژگی به محتوا می‌گوید که نگه دارنده را به روش های متنوعی پر کند؛ مانند «حفظ نسبت ابعاد» یا «کشیدن تصویر و پر کردن فضا تا جای ممکن».

به تصویر پاریس در پایین نگاه کنید، که یک تصویر ۴۰۰x۳۰۰ پیکسل است:

اما، اگر تصویر را طوری استایل دهی کنیم که ۲۰۰x۴۰۰ پیکسل باشد، تصویر به صورت زیر خواهد بود:

مثال
img {
  width: 200px;
  height: 400px;
}

می‌بینیم که تصویر فشرده شده‌ تا با نگه‌دارندهٔ ۲۰۰x۴۰۰ خود همخوانی داشته باشد، و نسبت ابعاد اصلی آن نیز نابود از بین رفته است.

اگر از object-fit: cover; استفاده کنیم، این ویژگی موجب برش کناره‌های تصویر می‌شود، نسبت تصویر حفظ می‌شود، و همچنین فضا را پر می‌کند، مانند زیر:

مثال
img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

مثال دیگر[ویرایش | ویرایش]

در اینجا دو تصویر داریم و می‌خواهیم که آنها ۵۰٪ عرض پنجره مرورگر و ۱۰۰٪ ارتفاع آن را پر کند.

در مثال زیر از object-fit استفاده نمی‌کنیم، بنابراین زمانی که اندازه پنجره مرورگر را تغییر دهیم، نسبت ابعاد تصویر از بین می رود:

مشاهدهٔ نتیجه »


در مثال بعدی، از object-fit: cover; استفاده می‌کنیم، بنابراین هنگامی که اندازه پنجره مرورگر را تغییر دهیم، نسبت ابعاد تصویر حفظ می‌شود:

مشاهدهٔ نتیجه »


همه مقادیر ویژگی object-fit در CSS[ویرایش | ویرایش]

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

  • fill - این مقدار پیش‌فرض است. محتوای جایگزین شده به اندازه ای تبدیل می‌شود که جعبه محتوای عنصر را پر کند. در صورت لزوم، عنصر کشیده می‌شود یا فشرده می‌شود تا با اندازه جعبه محتوا همخوانی داشته باشد
  • contain- محتوای جایگزین شده scale می‌شود تا نسبت ابعاد خود را هنگام قرارگیری در جعبه محتوای عنصر، حفظ کند
  • cover- محتوای جایگزین شده به اندازه ای تبدیل می‌شود که نسبت ابعاد خود را هنگام پر کردن تمام فضای جعبه محتوا حفظ می‌کند. شئ برای متناسب شدن، بریده می شود
  • none- محتوای جایگزین شده تغییر سایز داده نمی‌شود
  • scale-down - اندازه محتوا به گونه ای تنظیم می شود که گویی مقادیر none یا contain مشخص شده‌اند (منجر به کوچکترین ابعاد شی می‌شود)

مثال زیر تمامی مقادیر ممکن ویژگی object-fit را نمایش می‌دهد:

مثال
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

منابع آموزشی[ویرایش]