شرح object-fit في CSS — كيف تمنع تشويه الصور داخل الصناديق؟

عند تحديد عرض وارتفاع ثابتين للصورة، قد تظهر الصورة متمددة أو مضغوطة بشكل سيء. خاصية object-fit في CSS تحل هذه المشكلة وتبقي الصورة متناسقة.

إذا كنت تبحث عن شرح object-fit في CSS أو الفرق بين cover و contain أو كيف أمنع تشويه الصور، فهذا الدرس عملي ومباشر.

ما هي object-fit في CSS؟

object-fit تحدد كيف تملأ الصورة (أو الفيديو) الصندوق المخصص لها عند وجود أبعاد ثابتة مثل width وheight.

التعريف البسيط: object-fit في CSS تتحكم بكيفية احتواء الصورة داخل صندوقها دون تشويه.

المشكلة بدون object-fit

img {
    width: 180px;
    height: 180px;
}

ماذا يفعل هذا الكود؟ يفرض أبعاداً ثابتة على الصورة حتى لو كانت بنسب مختلفة.

النتيجة المتوقعة: احتمال كبير لتمدد/تشوه الصورة.

خطأ شائع: تحديد width وheight معاً بدون object-fit.

النتيجة في المتصفح: بدون object-fit

قد تظهر الصورة مشوهة

النتيجة في المتصفح: مع object-fit: cover

تناسب جيد مع قص بسيط

قيم object-fit الأساسية في CSS

1) cover

تملأ الصندوق بالكامل مع الحفاظ على تناسب الصورة. قد يتم قص جزء من الصورة.

img {
    object-fit: cover;
}

2) contain

تظهر الصورة كاملة داخل الصندوق بدون قص. قد تظهر فراغات حولها.

img {
    object-fit: contain;
}

3) fill

تملأ الصندوق بالكامل حتى لو تشوهت الصورة. هذه القيمة الافتراضية غالباً أقل ملاءمة للصور.

img {
    object-fit: fill;
}

4) none

تعرض الصورة بحجمها الأصلي دون ملاءمة للصندوق.

5) scale-down

تختار بين none وcontain حسب الأصغر.

cover

contain

fill

object-position في CSS

عند استخدام cover، يمكنك تحديد أي جزء من الصورة تريد إظهاره أكثر.

img {
    width: 260px;
    height: 160px;
    object-fit: cover;
    object-position: top center;
}

ماذا يفعل هذا الكود؟ يركّز القص على الجزء العلوي من الصورة.

النتيجة المتوقعة: تحكم أفضل في النقطة البصرية المهمة (وجه/منتج/شعار).

خطأ شائع: ترك object-position افتراضي رغم أن الجزء المهم مقصوص.

النتيجة في المتصفح:

أين نستخدم object-fit عملياً؟

• بطاقات المنتجات (Product Cards).
• صور المقالات المصغرة (Thumbnails).
• صور الحسابات الدائرية/المربعة.
• مع <video> أيضاً في بعض الواجهات.

أخطاء شائعة في object-fit CSS

١) نسيان تحديد height: object-fit لن يظهر أثره بوضوح.

٢) استخدام fill افتراضياً: تشويه الصورة.

٣) إهمال object-position: قص أجزاء مهمة من الصورة.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما الفرق بين object-fit: cover و contain في CSS؟

cover يملأ الصندوق مع قص ممكن، contain يظهر الصورة كاملة مع احتمال فراغات.

كيف أمنع تشويه الصورة عند تحديد width وheight في CSS؟

استخدم object-fit: cover; أو contain حسب الهدف.

لماذا object-fit لا تعمل معي؟

غالباً لأن العنصر لا يملك أبعاداً واضحة (خصوصاً height).

هل object-fit تعمل مع الفيديو؟

نعم، يمكن استخدامها مع <video> أيضاً.

ما أفضل قيمة object-fit لصور البطاقات؟

غالباً cover لأنها تعطي شكلاً متناسقاً للشبكات.