خاصية Aspect-Ratio
آخر تحديث: 2026-09-13
aspect-ratio خاصية Aspect-Ratio
تجبر خاصية aspect-ratio العنصر على الحفاظ على نسبة ثابتة بين العرض والارتفاع، مما يلغي الحاجة إلى حيلة النسبة المئوية للـ padding القديمة. قيمتها الافتراضية auto تستخدم النسبة الجوهرية للعنصر، كما في الصور. هي ميزة CSS حديثة نسبيًا تُبسّط بشكل كبير الحاويات المتجاوبة للفيديو والبطاقات.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | length |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
aspect-ratio: auto || <ratio>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | استخدم نسبة العرض إلى الارتفاع الجوهرية للعنصر. |
<ratio> | النوع | نسبة محددة، مثل 16/9. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| aspect-ratio | ✓ v88 | ✓ v88 | ✓ v89 | ✓ v15 | ✓ v74 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يؤدي اقتران aspect-ratio مع width:100% إلى إنشاء حاوية متناسبة متكيفة، تُستخدم غالبًا للفيديو والصور المضمّنة.
❓ الأسئلة الشائعة
Qما الفرق بين aspect-ratio وحيلة padding-top؟
Aكلاهما ينشئ حاويات متناسبة، لكن aspect-ratio خاصية أصلية، مما يجعلها أكثر قابلية للقراءة والصيانة. تعتمد حيلة padding-top على حشو بنسبة مئوية بالنسبة للعرض لدفع الارتفاع، وعادة مع عنصر شبه ::before ومحتوى موضع مطلق، وهو أمر معقد. ينجز aspect-ratio المهمة في سطر واحد، لذا فهو الخيار الموصى به للمشاريع الجديدة.
Qهل يعمل height عند تعيين aspect-ratio؟
Aيحسب aspect-ratio الارتفاع من عرض محدد مسبقًا؛ وإذا قمت أيضًا بتعيين height صراحةً، فإن ذلك الارتفاع الصريح يفوز ويُلغي الارتفاع المحسوب من النسبة، فلا تُضمن النسبة بعد الآن. للحفاظ على النسبة مفروضة، لا تُعيّن height؛ عيّن فقط width و aspect-ratio. لاحظ أيضًا أن auto تعني النسبة الجوهرية للعنصر، مثل الأبعاد الأصلية للصورة.
Qلماذا لا يعمل aspect-ratio؟
Aالأسباب الشائعة: أولًا، السعة لها height معيّن أيضًا، والارتفاع الصريح له الأولوية؛ ثانيًا، العنصر ليس له عرض، مع width:auto ولا محتوى، مما يترك النسبة بلا أساس تعمل منه؛ ثالثًا، المتصفح قديم جدًا، إذ حصلت الخاصية على دعم مستقر في Chrome 88 و Firefox 89 و Safari 15. عند التصحيح، أكّد أولًا حالة العرض والارتفاع وأعطِ العنصر عرضًا مثل width:100%.
Qكيف أبني حاوية فيديو متجاوبة باستخدام aspect-ratio؟
Aاضبط width:100%; aspect-ratio:16/9 على الحاوية. مع تغير عرض الأصل، يُحسب الارتفاع تلقائيًا للحفاظ على النسبة، فتتغير أبعاد الصندوق بشكل متناسب؛ ثم ضع iframe أو فيديو في موضع مطلق بالداخل ليملأه. هذا يستبدل حيلة padding-top تمامًا. للصور، اضبط مسبقًا aspect-ratio على حاوية img لتقليل إزاحة التخطيط (CLS) أثناء تحميل الصورة، مما يحسّن مقاييس Core Web Vitals بشكل ملموس.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
