021-28423015

ویژگی object-fit در CSS

خصوصیات object-fit  برای مشخص کردن نحوه تغییر اندازه تصویر <img> یا <video> به ظرفیت آن استفاده می شود.

پشتیبانی مرورگر

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

CSS The object-fit Property

ویژگی object-fit در CSS

خصوصیات object-fit  برای مشخص کردن نحوه تغییر اندازه تصویر <img> یا <video> به ظرفیت آن استفاده می شود.

این ویژگی به محتویات می گوید که div را به روش های مختلف پر کند؛ مانند "حفظ نسبت ابعاد" یا "کشش به اندازه فضای ممکن".

به تصویر زیر از پاریس نگاهی بیندازید که 400x300 پیکسل است:

Paris

با این حال، اگر تصویر بالا را به 200x400 پیکسل برسانیم:

Paris

ویژگی object-fit
img {
    width: 200px;
    height: 400px;
}
مشاهده مثال

ما می بینیم که تصویر برای فشرده سازی 200x400 پیکسل فشرده می شود و نسبت ابعاد اصلی آن نابود می شود.

اگر ما از object-fit استفاده کنیم: cover؛ آن را از دو طرف تصویر قطع، حفظ نسبت ابعاد، و نیز پر کردن فضا، مانند این می شود

Paris

cover در ویژگی object-fit
img {
    width: 200px;
    height: 400px;
    object-fit: cover;
}
مشاهده مثال

مثال دیگر

در اینجا دو تصویر داریم و می خواهیم آنها 50٪ پنجره مرورگر و 100٪ ارتفاع را پر کنند.

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

مثالی دیگر
Norway Paris
مشاهده مثال

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

cover در ویژگی object-fit
Norway Paris
مشاهده مثال

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

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

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

مقادیر ویژگی object-fit
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط