خاصية Object-position
آخر تحديث: 2026-09-13
object-position خاصية Object-position
تتحكم خاصية object-position في المكان الذي يُعرض فيه محتوى عنصر مستبدل مثل <img> أو <video> داخل حاويته. عندما يترك object-fit مساحة أو يقص المحتوى، يضبط object-position بؤرة المحاذاة لتبقى الأجزاء المهمة داخل المنطقة المرئية.
| الفئة | |
|---|---|
| القيمة الأولية | 50% 50% |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
object-position: <position>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<length> | <percentage> | النوع | إحداثيات موضع المحتوى |
left | center | right | top | bottom | كلمة مفتاحية | موضع مُعرّف مسبقاً |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| object-position | ✓ v30 | ✓ v12 | ✓ v36 | ✓ v9 | ✓ v16 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يُدمج object-position عادةً مع object-fit: cover للحفاظ على المحتوى المهم (مثل رأس الشخص) داخل القص.
تلميح： يدعم الكلمات المفتاحية (left و center و right و top و bottom) وقيم الطول أو النسبة المئوية الملموسة، تماماً مثل background-position.
❓ الأسئلة الشائعة
Qهل يمكن تحريك خاصية object-position باستخدام انتقالات CSS؟
Aنعم. object-position خاصية طول/نسبة مئوية، لذا تدعم transition و animation — وتُستخدم غالباً لتحريك البؤرة عند المرور، مثل تحرّك الصورة ببطء من المركز إلى أعلى اليسار عند دخول الماوس. لاحظ أن تحريكها يُطلق الرسم مجدداً، فانتبه للأداء مع الصور الكبيرة؛ ويمكنك دمجها مع خصائص مركّبة مثل transform.
Qبِمَ تتعلّق قيم النِّسب المئوية في object-position في CSS؟
Aتُحسب النِّسب المئوية بناءً على الفرق بين حجم الحاوية وحجم المحتوى. 50% 50% هو المحاذاة المركزية الافتراضية؛ و 100% 100% يُحاذي الزاوية السفلية اليمنى للمحتوى مع السفلية اليمنى للحاوية؛ و 0% 50% يُحاذي الحافة اليسرى للمحتوى مع الحافة اليسرى للحاوية. ببساطة، كلما زادت النسبة تحرّك المحتوى أبعد في ذلك الاتجاه، ويُقص الفائض أو يُترك كمساحة.
Qكيف يعمل object-fit: cover و object-position معاً في CSS؟
Aيملأ cover الحاوية ويقص الفائض، ويتخذ object-position القرار عن موضع القص. لصورة رمزية يجب أن تحتفظ بقمة الرأس، اكتب object-fit: cover; object-position: top;. في جدران الصور والصور الرئيسية للتجارة الإلكترونية، يؤدي محاذاة بؤرة التركيز البصرية لكل صورة (وجه أو موضوع المنتج) إلى موضع ثابت إلى مظهر أكثر احترافية بكثير.
Qهل object-position: center و object-position: 50% 50% متطابقان؟
Aالتأثير متطابق: كلاهما يوسّط المحتوى أفقياً وعمودياً. تتطابق صيغة الموضع مع background-position، وتدعم الكلمات المفتاحية left و center و right و top و bottom وقيم الطول والنِّسب المئوية، فضلاً عن أشكال الإزاحة مثل right 10px top 20px. استخدم الطول أو النِّسب المئوية عند الحاجة إلى تحكم دقيق.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
