صفت object-position در css

صفت object-position در css تراز عناصر خارج محدوده

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

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

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

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

عناصر Replacement Elements

Replacement Elements به عناصری گفته می شود که محتوا و ابعاد آنها از منبعی خارج از محدوده سی اس اس تعیین می شوند.

مثل تگ video ، تگ img و یا تگ هایی مثل textarea و input ها.

در حقیقت در حالت پیش فرض این عناصر یا تگ ها ، محتوای مربوط به خود را در مرکزشان ترسیم می کنند. شما می توانید از طریق خصوصیت object-position این حالت پیش فرض را تغییر دهید.

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

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

1. مقدار position
2. مقدار initial
3. مقدار inherit

صفت object-position در css تراز عناصر خارج محدوده

مقدار position درون خاصیت object-position در زبان سی اس اس

اگر خاصیت object-position را برای یک عنصر html برابر با مقدار position تعریف کنیم، یعنی می خواهیم موقعیت تصویر یا ویدیو را درون جعبه محتوای آن مشخص می کند.

مقدار اول محور x ها را کنترل می کند و مقدار دوم محور y ها را کنترل می کند.

می توان یک رشته ( چپ، مرکز یا راست ) یا یک عدد ( در واحد px یا ٪ ) برای این مقدار تعیین نمود.  همچنین در این خصوصیت ، استفاده از مقادیر منفی مجاز است.

مقدار initial درون خاصیت object-position در زبان سی اس اس

اگر خاصیت object-position را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت object-position در زبان سی اس اس

اگر خاصیت object-position را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

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

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

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

عناوین ساختاری خاصیت object-position	وضعیت ساختاری خاصیت object-position
مقدار پیش فرض	50% 50%
قابلیت توارث	دارد
قابلیت تحرک	دارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.objectPosition="0 10%

پشتیبانی مرورگرهای اینترنتی از خاصیت object-position در زبان طراحی سی اس اس

خاصیت css
object-position	31.0	16.0	36.0	10.0	19.0