صفت object-fit در css
صفت object-fit در css ابعاد محتوای خارج محدوده
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت object-fit در زبان css توضیحاتی را ارائه نماییم.
ویژگی کاربردی object-fit در زبان css و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
معرفی و کاربرد ویژگی جدید object-fit در زبان طراحی سی اس اس
به کمک خاصیت object-fit می توانیم برای محتوای عناصر با منبعی خارج از محدوده css یا ( Replacement Elements ) ابعاد مشخصی تعیین کنیم.
عناصر Replacement Elements
Replacement Elements به عناصری گفته می شود که محتوا و ابعاد آنها از منبعی خارج از محدوده سی اس اس تعیین می شوند. مثل تگ video ، تگ img و یا تگ هایی مثل textarea و input ها.
مقادیر صفت جدید object-fit در زبان طراحی سی اس اس
صفت object-fit که در زبان طراحی CSS3 معرفی شده است، 7 مقدار می پذیرد که عبارتند از:
- مقدار fill
- مقدار contain
- مقدار cover
- مقدار none
- مقدار scale-down
- مقدار initial
- مقدار inherit
صفت object-fit در css ابعاد محتوای خارج محدوده
مقدار fill درون خاصیت object-fit در زبان سی اس اس
اگر خاصیت object-fit را برای یک عنصر html برابر با مقدار fill تعریف کنیم، یعنی می خواهیم اندازه محتوای عناصر با منبع خارج از محدوده css مانند ( تگ img یا تگ video و… ) را طوری تغییر دهیم که کل فضای محتوای تگ html مربوطه پر کند. و کل محتوای عنصر html نمایش داده شود.
مقدار fill به عنوان مقدار پیش فرض در خصوصیت object-fit محسوب می شود.
[html] div{ object-fit: fill; }[/html]
مقدار contain درون خاصیت object-fit در زبان سی اس اس
اگر خاصیت object-fit را برای یک عنصر html برابر با مقدار contain تعریف کنیم، یعنی می خواهیم اندازه محتوای عناصر با منبع خارج از محدوده css مانند ( تگ img یا تگ video و… ) را طوری تغییر دهیم که عرض و ارتفاع محتوای تگ html مربوطه درون ناحیه ترسیم قرار بگیرند. ( با حفظ تناسب عرض و ارتفاع محتوای عنصر html )
[html] div{ object-fit: contain; }[/html]
مقدار cover درون خاصیت object-fit در زبان سی اس اس
اگر خاصیت object-fit را برای یک عنصر html برابر با مقدار cover تعریف کنیم، یعنی می خواهیم اندازه محتوای عناصر با منبع خارج از محدوده css مانند ( تگ img یا تگ video و… ) را طوری تغییر دهیم که مقدار کوچکتر عرض و ارتفاع ، کل فضای ترسیم محتوای تگ html مربوطه را پوشش دهد.
[html] div{ object-fit: cover; }[/html]
مقدار none درون خاصیت object-fit در زبان سی اس اس
اگر خاصیت object-fit را برای یک عنصر html برابر با مقدار none تعریف کنیم، یعنی می خواهیم اندازه محتوای عناصر با منبع خارج از محدوده css مانند ( تگ img یا تگ video و… ) به هیچ عنوان تغییر ندهیم یعنی اندازه فضای ترسیم محتوای تگ html به صورت ذاتی تعیین گردد و با همان ابعادی که ترسیم شده درون محتوای عنصر html قرار بگیرد.
[html] div{ object-fit: none; }[/html]
مقدار scale-down درون خاصیت object-fit در زبان سی اس اس
اگر خاصیت object-fit را برای یک عنصر html برابر با مقدار scale-down تعریف کنیم، یعنی می خواهیم اندازه محتوای عناصر با منبع خارج از محدوده css مانند ( تگ img یا تگ video و… ) را طوری تغییر دهیم که مرورگر اینترنتی اندازه فضای محتوای تگ html مربوطه را براساس مقادیر none و یا cover تعیین کند.
در این حالت مرورگر اینترنتی معمولا مقدار کوچکتر را بین none و contain انتخاب خواهد کرد.
[html] div{ object-fit: scale-down; }[/html]
مقدار initial درون خاصیت object-fit در زبان سی اس اس
اگر خاصیت object-fit را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.
مقدار inherit درون خاصیت object-fit در زبان سی اس اس
اگر خاصیت object-fit را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.
صفت object-fit در css ابعاد محتوای خارج محدوده
بررسی خاصیت object-fit از نظر نسخه زبان طراحی سی اس اس
ویژگی کاربردی object-fit در زبان css و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
بررسی ساختاری خصوصیت object-fit در زبان طراحی سی اس اس
عناوین ساختاری خاصیت object-fit | وضعیت ساختاری خاصیت object-fit |
مقدار پیش فرض | fill |
قابلیت توارث | ندارد |
قابلیت تحرک | ندارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.objectFit="cover |
پشتیبانی مرورگرهای اینترنتی از خاصیت object-fit در زبان طراحی سی اس اس
| خاصیت css |  |  |  |  |  |
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
دیدگاهتان را بنویسید