شرح صفوف ومحتوى الفقرة
قبل الانتشار الشامل لخاصية object-fit، اعتاد كثيرون استبدال وسم <img> الدلالي بصناديق <div> فارغة منسقة عبر background-image و background-size: cover; لمجرد الحصول على قص متناسق. أما هندسياً اليوم، فيجب إبقاء كل صورة ذات معنى داخل وسم <img> مع object-fit للحفاظ على النص البديل وأرشفة محركات البحث، وقصر الخلفيات على الزخارف البحتة.
| معيار المقارنة | وسم <img> مع object-fit | خاصية background-image |
|---|---|---|
| قارئات الشاشة والنص البديل | مدعوم أصلياً عبر سمة alt الوصفية | غير مقروء افتراضياً لأدوات الوصول |
| أرشفة محركات البحث | يُفهرس مباشرة في نتائج بحث الصور | يُعامل كتنسيق زخرفي غير مفهرس |
| أدوات القص والتموضع | object-fit: cover; مع object-position | background-size: cover; مع background-position |
| الاستخدام الهندسي الأمثل | صور المنتجات والمقالات والشعارات والحسابات | النقوش الهندسية والخلفيات التجميلية فقط |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
استخدم object-fit: cover; مع object-position لملء بطاقات الصور بالتناسب دون تشويه، واستخدم object-fit: contain; لإظهار الشعارات وصور المنتجات كاملة، وثبّت أبعاد الصناديق المرنة عبر aspect-ratio لمنع قفز التخطيط. الخطوة التالية — انتقل إلى درس التحكم في شكل القوائم في لغة CSS لإتقان تخصيص الرموز والترقيم وتجريد القوائم باحترافية.