object-fit

خاصية ملاءمة الوسائط object-fit

خاصية object-fit تضبط كيف تملأ صورة أو فيديو إطارها المحدد — cover للصور الشخصية وبطاقات بأبعاد موحدة بلا تشويه.

شقيقة background-size لكن لوسوم المحتوى الحقيقية img وvideo: عندما تفرض على الصورة أبعادًا تخالف نسبتها، الافتراضي fill **يمططها** قبحًا؛ cover تملأ الإطار بقص أنيق محافظ على النسب — سر شبكات البطاقات بصور موحدة المقاس مهما اختلفت مصادرها، وسر الأفاتار الدائري غير المبعوج (أفاتار هذا الموقع عليها).

ومعها object-position لاختيار ناحية القص (الوجوه للأعلى)، وcontain لإظهار كامل الصورة بفراغ عند الضرورة (لوحات، مخططات).

الصياغة

.card img {
  width: 100%;
  height: 180px;      /* ارتفاع موحد للشبكة */
  object-fit: cover;  /* ملء بلا تشويه */
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .imgs img { width: 130px; height: 90px; border-radius: 10px; margin: 3px; }
</style>
<div class="imgs">
  <img src="https://placehold.co/400x150/7c5cff/white?text=fill+مشوهة" style="object-fit:fill" alt="">
  <img src="https://placehold.co/400x150/22d3ee/white?text=cover+نظيفة" style="object-fit:cover" alt="">
</div>
<p>نفس الصورة العريضة بإطار واحد: fill مططتها — cover قصّت بذكاء.</p>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
cover	ملء الإطار بقص محافظ على النسب — بطاقات وأفاتارات
contain	كامل الصورة داخل الإطار مع فراغ — مخططات ولوحات
fill	الافتراضي الممطط — نادرًا ما تريده
object-position	ناحية بقاء الاهتمام عند القص

💡 نصائح عملية

شبكة بطاقات بصور مصادر مختلفة: ارتفاع ثابت + cover = صف نظيف دائمًا
أفاتار دائري مثالي: أبعاد متساوية + radius 50% + object-fit cover

⚠️ أخطاء شائعة

فرض أبعاد بلا object-fit — الصور المبعوجة توقيع الإهمال
الخلط بينها وبين background-size — هذه لوسوم img/video الحقيقية

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs