ویژگی object-position CSS

تعریف و استفاده

ویژگی object-position با object-fit استفاده می‌شود تا تعیین شود که چگونه باید از مختصات x/y برای <img> یا <video> در جعبه محتوای خود استفاده شود.

لطفاً به: مراجعه کنید

آموزش CSS:object-fit CSS

دستورالعمل CSS:object-position CSS

دستورالعمل HTML DOM:ویژگی objectPosition

مثال

اندازه تصویر را تنظیم کنید تا با جعبه محتوایش متناسب شود و تصویر را 5px به سمت چپ و 10% به سمت بالا حرکت دهید:

img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px solid red;
}

آزمایش کنید

آموزش نحوی CSS

object-position: position|initial|inherit;

مقدار ویژگی

مقدار توضیح
position

موقعیت تصویر یا ویدیو را در جعبه محتوایش تعیین می‌کند.

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

می‌تواند یک رشته (چپ، مرکز یا راست) یا عدد (با واحد px یا ％) باشد. مقادیر منفی مجاز هستند.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به: مراجعه کنید initial.
inherit این ویژگی را از عنصر پدر خود ارث می‌برد. لطفاً به: مراجعه کنید inherit.

جزئیات فنی

مقدار پیش‌فرض: 50% 50%
وراثت: بله
انیمیشن تولید: پشتیبانی می‌شود. لطفاً به: مراجعه کنیدویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
آموزش نحوی JavaScript: object.style.objectPosition="0 10%"

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

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که این ویژگی را کاملاً پشتیبانی می‌کند.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 10.0 19.0