aspect-ratio

نسبة الأبعاد aspect-ratio

aspect-ratio يثبّت نسبة عرض إلى ارتفاع العنصر — يمنع قفزة التخطيط أثناء تحميل الصور والفيديو قبل معرفة أبعادها.

قبل هذه الخاصية، كانت حيلة «الحشو النسبي» (padding-bottom بنسبة مئوية) هي الطريقة الوحيدة لحجز مساحة بنسبة ثابتة لعنصر مثل صورة أو iframe فيديو قبل تحميله فعليًا — حيلة غير بديهية وصعبة القراءة. aspect-ratio: 16 / 9 تفعل نفس الشيء بسطر واحد مباشر.

الشرط: يجب أن يكون أحد البعدين تلقائيًا (auto) ليكون للخاصية أثر — عادة تحدّد width ثابتًا وتترك height: auto فيُحسب تلقائيًا حسب النسبة. هذا يمنع Cumulative Layout Shift (CLS) الشهير: قفزة المحتوى المزعجة عندما تكتمل صورة التحميل وتدفع كل ما تحتها فجأة.

الصياغة

img, video, iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.square { aspect-ratio: 1 / 1; }

⚡ جرّب بنفسك

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

🎨 محرّر HTML/CSS

<style>
  .thumb { width: 200px; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #7c5cff, #22d3ee); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
</style>
<div class="thumb">16 : 9</div>

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

أهم القيم

القيمة	الوظيفة
auto	القيمة الافتراضية — يعتمد على أبعاد العنصر الطبيعية إن وُجدت
width / height	مثل 16 / 9 أو 1 / 1 — نسبة صريحة
الشرط	أحد البعدين على الأقل يجب أن يكون auto ليكون للخاصية أثر

💡 نصائح عملية

استخدمه على الصور دائمًا مع width: 100%; height: auto لمنع قفزة التخطيط قبل التحميل
أبسط بكثير من حيلة padding-bottom النسبية القديمة، واستبدلها بها

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

تحديد width وheight معًا بقيم صريحة وتوقّع أن aspect-ratio تغيّر شيئًا — لا أثر بلا بُعد auto
نسيانها على صور المقالات فتظهر قفزة تخطيط مزعجة أثناء التحميل

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

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