حاسبة نسبة العرض إلى الارتفاع

كيفية استخدام حاسبة نسبة العرض إلى الارتفاع

1. اختر إحدى النسب الشائعة (16:9 و4:3 و21:9 و1:1 و9:16 و3:2 و16:10 و4:5)، أو اكتب قيمك الخاصة في النسبة أو الحجم الأصلي. يمكنك إدخال نسبة (16 و9) أو الأبعاد الحقيقية لصورة أو فيديو أو شاشة (1920 و1080).
2. اقرأ النتائج: النسبة المبسّطة، والنسبة العشرية (العرض مقسومًا على الارتفاع)، والاتجاه، وأقرب مقياس قياسي. تعني العلامة «≈» أن أبعادك قريبة من ذلك المقياس لكنها لا تطابقه تمامًا.
3. في قسم الحجم الجديد (مع الحفاظ على النسبة)، اكتب العرض الجديد لتحصل على الارتفاع المناسب، أو الارتفاع الجديد لتحصل على العرض. يعرض السطر الذي يليه خطوات الحساب. ألغِ تحديد التقريب إلى أقرب بكسل صحيح إذا احتجت إلى القيمة الدقيقة، كما في مقاسات الطباعة بالمليمتر مثلًا.
4. يحوّل زر تبديل العرض والارتفاع النسبة الأفقية إلى عمودية (فتصبح 16:9 هي 9:16) والعكس.
5. ترسم المعاينة مستطيلًا بنسبتك، ويسرد الجدول أبعاد كل نسبة شائعة عند العرض الجديد الذي اخترته.
6. انسخ شيفرة CSS بالضغط على نسخ.

كيف يجري الحساب؟

نسبة العرض إلى الارتفاع (أو نسبة الأبعاد) هي العرض مقسومًا على الارتفاع، وتُكتب في صورة عددين صحيحين. ولتبسيطها، تقسم الأداة الطرفين على القاسم المشترك الأكبر لهما: القاسم المشترك الأكبر للعددين 1920 و1080 هو 120، إذن 1920:1080 = 16:9. أما القيم العشرية فتُضرب أولًا في قوة من قوى العشرة (فتصبح 2.39:1 هي 239:100).

ولتغيير الحجم مع الحفاظ على التناسب، تُستخدم القاعدة الثلاثية البسيطة:

• الارتفاع الجديد = العرض الجديد × الارتفاع الأصلي ÷ العرض الأصلي
• العرض الجديد = الارتفاع الجديد × العرض الأصلي ÷ الارتفاع الأصلي

مثال: فيديو بنسبة 16:9 وعرض 1280 px يكون ارتفاعه 1280 × 9 ÷ 16 = 720 px.

بعض الشاشات لها نسب «غريبة». فالحاسوب المحمول بدقة 1366 × 768 تُبسَّط نسبته إلى 683:384، أي 1.779:1، وهي قريبة جدًا من 16:9 (1.778:1)، ولذلك تظهر النتيجة «≈ 16:9». أما الشاشات التي تُباع على أنها 21:9 فنسبتها الحقيقية 64:27 (2560 × 1080) أو 43:18 (3440 × 1440)، ولهذا تظهر النسبتان كلتاهما في الجدول.

خاصية aspect-ratio في CSS

تطلب الخاصية aspect-ratio: 16 / 9; من المتصفح أن يحسب البُعد الناقص بنفسه: فمع width: 100% يتبع الارتفاع العرض تلقائيًا، ويتغيّر حجم العنصر مع حاويته. تعمل هذه الخاصية في جميع المتصفحات الحديثة (منذ 2021)، وهي مثالية لتضمين مقاطع الفيديو والبطاقات والعناصر النائبة للصور والصور المصغّرة. واجمعها مع object-fit: cover على الصور لقصّها بدلًا من تمديدها.

وتتضمن الشيفرة أيضًا تقنية padding-top القديمة بديلًا احتياطيًا: تُحسب الحشوة بالنسبة المئوية من العرض، فتحجز padding-top: 56.25% (أي 9 ÷ 16) مساحة بنسبة 16:9، ثم يوضع المحتوى داخلها بتموضع مطلق. لن تحتاج إليها إلا مع المتصفحات القديمة جدًا.

كما أن حجز المساحة بنسبة محددة يمنع إزاحة التخطيط أثناء تحميل الصور ومقاطع الفيديو، مما يحسّن مؤشر Cumulative Layout Shift (CLS).