خصائص موقع الكائن لـ CSS

التعريف والاستخدام

استخدام خاصية object-position مع object-fit يمكن تحديد كيفية استخدام الأعمدة/الشوكة الموجودة في "مربع المحتوى الخاص بي" للتعامل مع <img> أو <video>.

انظر أيضًا:

دليل CSSCSS object-fit

دليل CSSCSS object-position

دليل HTML DOMخصائص objectPosition

مثال

تعديل حجم الصورة لتتناسب مع مربع المحتوى، ونتقلل من موقف الصورة في المحتوى من اليسار 5px، من الأعلى 10%:

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

تجربة شخصية

syntax CSS

object-position: position|initial|inherit;

قيمة الخاصية

القيمة الوصف
position

يحدد موقع الصورة أو الفيديو داخل مربع المحتوى.

القيمة الأولى تتحكم في المحور x، والقيمة الثانية تتحكم في المحور y.

يمكن أن يكون هذا القيمة سلسلة (اليسار، الوسط أو اليمين) أو عدد (بأحرف px أو ％). يسمح بالقيم السلبية.
initial ضع هذا الخصائص على قيمته الافتراضية. انظر: initial.
inherit يرث هذا الخصائص من عنصر الأب. انظر: inherit.

تفاصيل التقنية

القيمة الافتراضية: 50% 50%
الوراثة: نعم
تحريك إنتاج: يدعم. انظر:خصائص تحريك.
الإصدار: CSS3
جافا سكريبت syntax: object.style.objectPosition="0 10%"

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الأوائل الذي يدعم هذه الخاصية بالكامل.

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