ملاءمة الكائن (Object Fit)
درس float لفّ النص بجانب الوسائط. object-fit يجيب عن سؤال مختلف: عندما يجلس img أو video داخل إطار بحجم ثابت، كيف يجب أن يملأ المحتوى ذلك الإطار؟ أتقن cover وcontain قبل أن تمدّ الوجوه بـ fill.
مجموعة أدوات object-fit
📊 object-fit بنظرة سريعة
| القيمة | المهمة اليومية |
|---|---|
fill |
تمديد حتى الإطار — قد يشوّه نسبة العرض للارتفاع |
contain |
إظهار الوسائط كاملة داخل الإطار؛ قد تبقى أشرطة فارغة |
cover |
ملء الإطار؛ قد تُقصّ الحواف |
none |
الإبقاء على الحجم الذاتي؛ قد يتجاوز أو يترك فراغات |
scale-down |
مثل none أو contain — أيهما أصغر |
object-position |
يحدد أي جزء يبقى مرئيًا عند القص أو الملاءمة |
object-fit يتألق فقط عندما يكون للعنصر المستبدل عرض وارتفاع محددان (أو كلا المحورين مقيّدين). صورة حرة بارتفاع auto ليس لها إطار «تلائم نفسها فيه».
Cover — املأ الإطار واسمح بالقص
البطاقات ومصغّرات البطل غالبًا تريد كل بكسل من الإطار ممتلئًا. cover يكبّر ويقصّ الفائض. اقرن إطارًا مربعًا مع cover لشبكات مرتبة.
.card__media {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
Contain — أظهر الصورة كاملة
لقطات المنتجات والمخططات غالبًا يجب أن تبقى مرئية بالكامل. contain يترك أشرطة فارغة إذا اختلفت النسب — شريط أفضل من شعار مقطوع.
.product__img {
width: 240px;
height: 240px;
object-fit: contain;
background: #f7f7f7;
}
Fill يمدّ — استخدمه بحذر
fill يفرض الوسائط على حجم الإطار حتى لو تشوّهت النسب. مناسب للنسيج التجريدي؛ خطر على الوجوه والشعارات والرسوم البيانية.
.texture {
width: 320px;
height: 120px;
object-fit: fill;
}
object-position يوجّه القص
عندما يقصّ cover، قد يخفي المركز الافتراضي وجهًا أو شعارًا. حرّك بـ object-position — نسب مئوية أو كلمات مثل top وleft.
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 20%;
}
عادة object-fit هادئة
استخدم <img> / <video> حقيقيين مع object-fit للوسائط ذات المعنى. استخدم background-size عندما تكون الصورة زخرفة CSS فقط. حجّم الإطار أولًا، اختر cover أو contain، ثم اضبط الموضع.
.avatar {
width: 64px;
height: 64px;
object-fit: cover;
object-position: center top;
border-radius: 50%;
}
جرّب بنفسك
- أعطِ صورة عرضًا وارتفاعًا ثابتين، ثم جرّب
coverمقابلcontain. - ابنِ أفاتارًا دائريًا بـ
coverوحرّكobject-position. - طبّق
fillمرة ولاحظ التشويه — ثم ارجع. - قارن نفس القص كزخرفة
background-size: cover. - اكتب جملة: متى يكون contain أأمن من cover؟
أخطاء شائعة
- توقع عمل
object-fitبلا إطار بحجم محدد - استخدام
fillعلى الصور الشخصية والشعارات - الخلط بين هذا الدرس ولفّ float أو إزاحات position
- وضع صور ذات معنى فقط في
background-image(صعب للنص البديل) - نسيان
object-positionعندما يخفي cover الموضوع
ملخص
object-fitيلائم الوسائط المستبدلة داخل إطار بحجم محددcoverيملأ وقد يقصّ؛containيُظهر الكل وقد يترك أشرطةfillقد يشوّه — استخدمه قليلًاobject-positionيوجّه المنطقة المرئية- فضّل object-fit لمحتوى الوسائط؛ وbackground-size للزخرفة
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى