ویژگی object-fit

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ویژگی 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; استفاده کنیم، این ویژگی موجب برش کناره‌های تصویر می‌شود، نسبت تصویر حفظ می‌شود، و همچنین فضا را پر می‌کند، مانند زیر:

مثال
1 img {
2   width: 200px;
3   height: 400px;
4   object-fit: cover;
5 }


مثال دیگر

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

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

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


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

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


همه مقادیر ویژگی object-fit در CSS

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

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

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

مثال
1 .fill {object-fit: fill;}
2 .contain {object-fit: contain;}
3 .cover {object-fit: cover;}
4 .scale-down {object-fit: scale-down;}
5 .none {object-fit: none;}



منابع آموزشی