تظهر بطاقات المقالات مرتبة ثم تتحرك العناوين عند وصول الصور. قبل تغيير تصميم الشبكة، راجع هل توجد مساحة معروفة للصورة أثناء التحميل. CSS aspect-ratio قد تساعد على حساب هذه المساحة، لكن النتيجة تعتمد على الأبعاد الأخرى ونسبة المحتوى الفعلية.
النسبة المفضلة تحتاج بعدًا تلقائيًا
توضح وثائق MDN أن aspect-ratio تدخل في حساب الأبعاد التلقائية، وأن تثبيت العرض والارتفاع معًا يمنعها من التأثير في الحجم المفضل. كما يختلف سلوك auto مع صورة لها نسبة طبيعية عن حاوية عادية لا تملك محتوى مستبدلًا.
في نموذج افتراضي لبطاقة، حدد هل مساحة الغلاف ثابتة النسبة مهما اختلف المصدر أم تتبع النسبة الطبيعية لكل صورة. القرار الأول يحتاج سياسة قص واضحة، والثاني قد يغير ارتفاع البطاقة. لا تختَر نسبة تبدو جميلة في عينة واحدة ثم تفترض ملاءمتها لكل الأغلفة.
اختبر الحالات التي تكشف الخلل
| التجربة | ما تقارنه |
|---|---|
| صورة متأخرة | موضع النص قبل التحميل وبعده |
| مصدر بنسبة تختلف عن الحجز | تغير الارتفاع أو قص عنصر مهم |
| عرض وارتفاع ثابتان معًا | هل تتوقع أثرًا لا تمنحه الخاصية؟ |
| تعطل الصورة | بقاء البطاقة مفهومة والوصف البديل مناسبًا |
حجز المساحة مختلف عن ملء الصورة
قد تحجز الحاوية مساحة صحيحة بينما تُقص شاشة هاتف أو عنوان داخل الغلاف. راجع طريقة ملء الصورة وموضع الجزء المهم على الهاتف والكمبيوتر. لا تعالج القص بإضافة عناصر أو كتابة بديلة تغير معنى الصورة الأصلية.
وإذا استخدمت auto مع نسبة احتياطية لصورة، راجع ما يحدث عند اكتشاف نسبتها الطبيعية. اختلاف النسب قد يعيد حساب الارتفاع. سجّل مصدر كل صورة وأبعادها بدل افتراض أن كل الملفات المرفوعة تتطابق مع مقاس التصدير المطلوب.
اعتمد التخطيط بقياس مستقل
تراجع تصميمات الواجهات القص والقراءة والمسافات، وتختبر فرق الويب التحميل البطيء وتبديل العرض والكاش. نجاح تجربة البطاقة لا يثبت أن CLS للصفحة كلها أصبح صفرًا؛ قد تتحرك عناصر أخرى كالإعلانات والخطوط. احتفظ بأدلة قبل وبعد وحدود الفحص، ولا تنسب تحسنًا رقميًا لم يُقَس.
