object-position

با استفاده از ویژگی object-position می توان محتوای عناصر نوع Replaced را ترازبندی کرد.

Replaced Element

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

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

به بیان دیگر ویژگی object-position مشابه ویژگی background-position عمل می کند با این تفاوت که از background-position برای تنظیم مکان پس زمینه عناصر استفاده می شود و از object-position برای محتوای عناصری مثل <video> و <img> استفاده می شود.

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

مقادیر ویژگی object-position

از آنجا که مقادیر این ویژگی مشابه مقادیر ویژگی background-position است می توانید برای بررسی کامل به مطلب مربوط به background-position مراجعه کنید.

همچنین در ادامه مثال هایی از مقدار دهی به این ویژگی نمایش داده شده است:

object-position: top right 20px;
object-position: 100% 100%;
object-position: 0 30px;
object-position: 1em 1em;

مثال

فرض کنید می خواهیم اندازه محتوای یک عنصر تصویر را برابر با contain قرار دهیم. احتمال این وجود دارد که تصویر در زمان ترسیم کوچک تر از ابعاد نگهدارنده اش باشد. می خواهیم در این صورت تصویر به بالای نگهدارنده اش چسبیده و از لحاظ افقی در مرکز قرار بگیرد:

img {
    width: 5em;
    height: 5em;
    object-fit: contain;
    object-position: top center;
}

See the Pen object-position by Mojtaba Seyedi (@seyedi) on CodePen.

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

پشتیبانی مرورگرها در سایت caniuse.com بصورت زیر می باشد: