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

أدخل الحساب

العرض (بكسل)

الارتفاع (بكسل)

نتائج

نسبة الأبعاد

١٦ : ٩

النسبة المبسّطة

النسبة العشرية (العرض ÷ الارتفاع)	١٫٧٧٧٨
حيلة padding-top (%)	٥٦٫٢٥%

ما هي حاسبة نسبة العرض إلى الارتفاع في CSS؟

تحوّل هذه الأداة أي قيمة عرض وارتفاع بالبكسل إلى نسبة أبعاد مبسّطة وأنيقة مثل 16:9 أو 4:3. كما تحسب لك نسبة padding-top المئوية الكلاسيكية التي كانت تُستخدم للحفاظ على الحاويات المتجاوبة (مقاطع الفيديو، الإطارات iframe، أغلفة الصور) بنسبة ثابتة، قبل أن يصبح دعم خاصية aspect-ratio الحديثة في CSS واسع الانتشار.

كيفية الاستخدام

أدخِل العرض والارتفاع الأصليين بالبكسل. تقوم الحاسبة باختزال النسبة إلى أبسط صورة لها باستخدام القاسم المشترك الأكبر (GCD)، وتعرض النسبة العشرية (العرض ÷ الارتفاع)، وتمنحك نسبة padding-top المئوية الجاهزة لإدراجها مباشرة في كود CSS الخاص بك.

شرح المعادلة

أولًا، أوجِد القاسم المشترك الأكبر (GCD) للعرض والارتفاع. ثم بقسمة الرقمين على هذا القاسم نحصل على النسبة المبسّطة. على سبيل المثال، الرقمان 1920 و1080 يشتركان في قاسم مشترك أكبر قيمته 120، فتصبح النسبة 16:9. أما حيلة padding-top فتعتمد على الارتفاع ÷ العرض × 100، لأن نسبة الحشو المئوية في CSS تُحسب نسبةً إلى عرض العنصر.

$$\text{Ratio} = \frac{\text{Width}}{\gcd} : \frac{\text{Height}}{\gcd}$$$$\text{Padding} = \frac{\text{Height}}{\text{Width}} \times 100\% \qquad \text{Decimal} = \frac{\text{Width}}{\text{Height}}$$

نسبة padding-top المئوية تحافظ على تناسب الارتفاع مع العرض في الصناديق المتجاوبة.

نسبة العرض إلى الارتفاع هي العلاقة بين العرض والارتفاع مختزلة بالقاسم المشترك الأكبر.

مثال محلول

لصورة بأبعاد 1920×1080: القاسم المشترك الأكبر GCD(1920, 1080) = 120. النسبة = \( \frac{1920}{120} : \frac{1080}{120} = \) 16:9. النسبة العشرية = \( 1920 \div 1080 \approx 1.7778 \). وقيمة padding-top = \( 1080 \div 1920 \times 100 = \) 56.25%. وبذلك يستخدم الغلاف المتجاوب القيمة padding-top: 56.25%.

الأسئلة الشائعة

لماذا أستخدم padding-top بدلًا من خاصية aspect-ratio؟ تعمل حيلة padding-top في جميع المتصفحات، حتى القديمة جدًا منها. أما المشاريع الحديثة فيمكنها ببساطة استخدام aspect-ratio: 16 / 9;

هل تعتمد النسبة المئوية على العرض أم الارتفاع كأساس؟ تُحسب نسب الحشو العمودية في CSS دائمًا نسبةً إلى عرض الكتلة الحاوية، ولهذا تكون المعادلة الارتفاع ÷ العرض.

ماذا لو لم تُختزل أرقامي بشكل جميل؟ أي عرض وارتفاع ينتجان نسبة صحيحة، لكنها قد لا تطابق اسمًا شائعًا مثل 16:9. وفي هذه الحالات تكون النسبة العشرية مفيدة جدًا.