میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

object-fit در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش object-fit در CSS با من همراه باشید.

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

فرض می کنیم در سایت محدودیتی در اندازه تصاویر قرار داده ایم، یعنی مثلا گفتیم اندازه این تصویر ( می تواند تصویر پروفایل باشد یا تصویر هدر پروفایل ) مثلا ۲۰۰ در ۲۰۰ پیکسل باشد.

حال ممکن است کاربران تصویری که آپلود می کنند ابعادش متفاوت تر یا بزرگتر باشد از اون چیزی که ما تعیین کردیم، در نتیجه می تونیم با استفاده از ویژگی object-fit مشخص کنیم که نحوه فیت / پُر شدن تصاویر به نسبت باکس تصویر چگونه باشد.

عناصر جایگزین شده یا Replaced Elements به عناصری گفته می شود که کنترل کردن محتوای آن خارج از محدوده CSS می باشد، و در کل نمی توانیم با استفاده از CSS بروی محتوای این عناصر دسترسی داشته باشیم که بخوایم مثلا استایل بهش بدیم. مثه img , video , iframe , embed

با استفاده از ویژگی object-position نیز می توان موقعیت قرارگیری ویژگی object-fit را مشخص کرد.


مثال از این ویژگی

در ادامه می توانید یک مثال از ویژگی object-fit را در زبان CSS مشاهده نمایید.

 

img.f1 {
background-color:#f2f2f2;
width: 350px;
height: 350px;
object-fit: cover;
}


img.f2 {
background-color:#f2f2f2;
width: 350px;
height: 350px;
object-fit: scale-down;
}

 

 


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

در جدول زیر می توانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی object-fit در CSS پشتیبانی می کنند یا خیر.

نام ویژگیChromeFirefoxOperaSafariIE
object-fit۳۱٫۰۳۶٫۰۱۹٫۰۱۰٫۰خیر

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

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

در جدول زیر می توانید، مقادیری را که می توان در این ویژگی استفاده کرد مشاهده نمایید.

مقدارتوضیح
fillپیش فرض – سعی میکند عنصر را بطور کامل فیت ظرف کند که تمام ابعاد ظرف را بپوشاند
containسعی میکند عنصر را در ابعاد / مقیاس کامل خودش نمایش دهد و عنصر بُرِش داده نخواهد شد
coverسعی میکند تمام فضای ظرف را بپوشاند و مقایس را حفظ کند ولی ممکن است عنصر بُرِش داده شود
noneهیچ حالتی بروی عنصر جایگزین شده اعمال نخواهد شد
scale-downمرورگر بطور خودکار سعی میکند بین none و contain یکی را انتخاب و اونی که عنصر را در کوچکترین ابعاد نمایش میدهد مشخص می کند.
initialاستفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inheritاستفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

نکات و توضیحات

این ویژگی در مرورگر اینترنت اکسپلورر یا IE پشتیبانی نمی شود.

 

 


امیدواریم آموزش object-fit در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟