aspect-*

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

تثبّت نسبة العرض إلى الارتفاع لعنصر (صورة، فيديو، إطار مضمّن) بلا حساب الأبعاد يدويًّا.

aspect-ratio خاصّية CSS تفرض علاقة ثابتة بين عرض العنصر وارتفاعه، فمهما تغيّر العرض (شاشة جوّال أو حاسوب) يُحسب الارتفاع تلقائيًّا بنفس النسبة. في Tailwind تأتي جاهزة كأصناف: aspect-square (1/1) وaspect-video (16/9) الأكثر شيوعًا، بالإضافة إلى صياغة عامة aspect-[العرض/الارتفاع] لأي نسبة أخرى.

فائدتها العملية الكبرى: منع اهتزاز التخطيط (layout shift) — تحجز الصورة أو الفيديو مساحته الصحيحة قبل اكتمال التحميل، لأن المتصفح يعرف نسبته فورًا من الصنف نفسه دون انتظار أبعاد الملف الحقيقية.

الصياغة

class="aspect-square"   /* 1 / 1  */
class="aspect-video"    /* 16 / 9 */
class="aspect-[4/3]"    /* نسبة مخصّصة */

⚡ جرّب بنفسك

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

🎨 محرّر HTML/CSS

<script src="https://cdn.tailwindcss.com"></script>
<div class="p-4 space-y-4">
  <img class="aspect-video w-full rounded-lg object-cover" src="https://picsum.photos/640/360" />
  <div class="aspect-square w-32 rounded-lg bg-purple-500"></div>
</div>

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

أهم القيم

القيمة	الوظيفة
aspect-square	نسبة 1/1 — مربّع دائمًا
aspect-video	نسبة 16/9 — قياسية للفيديو
aspect-auto	يعتمد على الأبعاد الطبيعية للعنصر
aspect-[n/m]	نسبة مخصّصة بين قوسين مربّعين

💡 نصائح عملية

ادمجها مع object-cover على الصور دائمًا حتى لا تتمدّد الصورة وتفقد نسبتها الأصلية
مفيدة جدًّا لإطارات YouTube المضمّنة عبر iframe لتبقى بنسبة صحيحة على كل الشاشات

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

استخدام aspect-video على صورة بدون object-cover فتظهر الصورة مشوّهة إن لم تطابق أبعادها الأصلية النسبة
نسيان تحديد عرض (w-full أو عرض ثابت) — بدونه لا معنى لنسبة الأبعاد

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

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