صفت object-fit در css ابعاد محتوای خارج محدوده

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت object-fit در زبان css توضیحاتی را ارائه نماییم.

ویژگی کاربردی object-fit در زبان css و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.

صفت object-fit در css ابعاد محتوای خارج محدوده - سایت آموزی

معرفی و کاربرد ویژگی جدید object-fit در زبان طراحی سی اس اس

به کمک خاصیت object-fit می توانیم برای محتوای عناصر با منبعی خارج از محدوده css یا ( Replacement Elements ) ابعاد مشخصی تعیین کنیم.

عناصر Replacement Elements

Replacement Elements به عناصری گفته می شود که محتوا و ابعاد آنها از منبعی خارج از محدوده سی اس اس تعیین می شوند. مثل تگ video ، تگ img و یا تگ هایی مثل textarea و input ها.

مقادیر صفت جدید object-fit در زبان طراحی سی اس اس

صفت object-fit که در زبان طراحی CSS3 معرفی شده است، ۷ مقدار می پذیرد که عبارتند از:

  1. مقدار fill
  2. مقدار contain
  3. مقدار cover
  4. مقدار none
  5. مقدار scale-down
  6. مقدار initial
  7. مقدار 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 در css تعیین ابعاد محتوای خارج محدوده

بررسی خاصیت object-fit از نظر نسخه زبان طراحی سی اس اس

ویژگی کاربردی object-fit در زبان css و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.

بررسی ساختاری خصوصیت object-fit در زبان طراحی سی اس اس