خاصية Object-fit
آخر تحديث: 2026-09-13
object-fit خاصية Object-fit
تتحكم خاصية object-fit في كيفية احتواء محتوى عنصر مستبدل مثل <img> أو <video> ضمن عرضه وارتفاعه المحددين. عندما تختلف نسبة أبعاد العنصر عن محتواه، يقرر object-fit ما إذا كان يمطّ أو يقطع مع الحفاظ على النسبة أو يعرض كل شيء — وهي أداة لا غنى عنها لتخطيطات الصور المتجاوبة.
| الفئة | |
|---|---|
| القيمة الأولية | fill |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
object-fit: fill | contain | cover | none | scale-down;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
fill | contain | cover | none | scale-down | كلمة مفتاحية | كيف يُحتوى محتوى العنصر المستبدل |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| object-fit | ✓ v30 | ✓ v12 | ✓ v36 | ✓ v9 | ✓ v16 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يُعد cover القيمة الأكثر شيوعاً: يحافظ على نسبة أبعاد الصورة ويملأ الحاوية مع قص الفائض — مثالي للصور المصغّرة المربعة.
تلميح： يحتاج object-fit إلى عرض وارتفاع صريحين على العنصر لكي يُفعَّل؛ ولا يؤدي تعيين العرض أو الارتفاع وحده إلى تشغيل سلوك الاحتواء.
❓ الأسئلة الشائعة
Qما الفرق بين object-fit و background-size؟
Aيُطبَّق object-fit على العناصر المستبدلة مثل img و video، ويتحكم في كيفية احتواء المحتوى داخل صندوق العنصر. تبقى الصورة في تدفّق المستند ومرئية لمحركات البحث ونص alt والمستخلصات. أما background-size فيُطبَّق على صور الخلفية ويناسب المحتوى الزخرفي البحت. استخدم img مع object-fit للصور المحتويات، و background مع background-size للزخرفة.
Qما الفرق بين scale-down و contain في object-fit؟
Aيقلّص contain الصورة بالتناسب لتناسب الحاوية بالكامل؛ وعندما تكون الصورة أصغر من الحاوية يُكبَّر لملئها (مع الحفاظ على النسبة). أما scale-down فيختار الأصغر بين none (الحجم الطبيعي) و contain، لذا لا تُكبَّر الصور الصغيرة أبداً. استخدم scale-down للصور الصغيرة لتجنّب التشوّش، وللصور الكبيرة يعطي الاثنان عادةً نفس النتيجة.
Qلماذا يقصّ object-fit: cover صورتي؟ كيف أحافظ على الجزء المهم؟
Aيحافظ cover على النسبة ويملأ الحاوية، لذا كلما اختلفت النسب يجب قص الفائض — ويحتفظ افتراضياً بالمنطقة المركزية. للحفاظ على المحتوى المهم (وجه أو شعار)، حرّك بؤرة القص عبر object-position، مثل object-position: top التي تحفظ الأعلى. يمكنك أيضاً استخدام aspect-ratio ليتطابق الحاوية مع الصورة وتتجنّب القص تماماً.
Qلماذا لا تعمل خاصية object-fit على عنصر الصورة الخاص بي؟
Aالسبب الأكثر شيوعاً هو عدم وجود عرض وارتفاع محددين للعنصر: عند تعيين بُعد واحد فقط والآخر auto، يُحجَّم العنصر المستبدل بنسبته الخاصة ولا يجد object-fit ما يحتويه. أكّد أيضاً أنه عنصر مستبدل (<img> و <video> و <iframe> و <embed>) — فمحتوى div عادي لا يخضع لتحكم object-fit. فحص هاتين النقطتين عادةً ما يحل المشكلة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
