با استفاده از ویژگی 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 بصورت زیر می باشد:
سلام ممنون خیلی خوبه این مجموعه ♥