حاسبة نسبة العرض إلى الارتفاع (الحفاظ على النسبة عند تغيير الحجم)
حدد النسبة المستهدفة وبُعدًا واحدًا؛ يتعبأ الآخر تلقائيًا. الاتجاه المعكوس يعمل بالطريقة نفسها. مفيد للفيديو وقص الصور وتصميم صفحات الويب المتجاوب.
- نسبة العرض إلى الارتفاع
- 16:9
- عشري
- 1.7778
- الأبعاد
- 1920 × 1080
كيف تعمل
ما هي نسبة العرض إلى الارتفاع
تصف نسبة العرض إلى الارتفاع العرضَ نسبةً إلى الارتفاع: 16:9 تعني 16 وحدة عرضًا لكل 9 ارتفاعًا. النسبة ذاتها تنطبق على أي حجم — 1920×1080 و800×450 كلتاهما 16:9. الحفاظ على نسبة العرض إلى الارتفاع عند تغيير الحجم يمنع تمدد الصور أو ضغطها وهو أساس التصميم المتجاوب.
نقبل أعدادًا صحيحة (16:9) أو أعشارًا (1.78:1) للنسبة، وأي حجم للعرض/الارتفاع. عدّل أي حقل — يتحدث الباقون للحفاظ على النسبة. تُعرض النسبة العشرية (العرض / الارتفاع) للاستخدام في تعبيرات CSS calc() أو أدوات تحرير الفيديو.
النسب الشائعة وأين تُستخدم
16:9 — تلفزيون HD الحديث وشاشات الكمبيوتر ويوتيوب ومعظم الأفلام منذ 2009. الإعداد الافتراضي لكل شيء تقريبًا اليوم.
9:16 — الفيديو العمودي لقصص انستغرام وتيك توك ويوتيوب Shorts. المقلوب الرأسي لـ16:9 للمحتوى المُصمَّم للهاتف.
1:1 — مربع. الإعداد الافتراضي لخلاصة انستغرام حتى 2021. أغلفة الألبومات وصور الملفات الشخصية.
4:3 — أجهزة التلفاز القديمة وشاشات الكمبيوتر قبل HD. لا يزال يُستخدم لبعض المحتوى على الطراز الكلاسيكي.
3:2 — الإعداد الافتراضي لكاميرات DSLR. أفلام 35 ملم. المطبوعات الكبيرة.
21:9 — عريض سينمائي. أفلام مصوَّرة بعدسة أنامورفية. بعض شاشات الكمبيوتر وأجهزة تلفاز LG.
لماذا تهم خاصية CSS aspect-ratio
في CSS الحديثة، يمكنك كتابة aspect-ratio: 16/9; — حدد النسبة ودع المتصفح يحسب الارتفاع من العرض (أو العكس). يتجنب الخدعة القديمة padding-bottom وهو ضروري لعناصر embed المتجاوبة وعناصر الحجز النائب للصور لمنع الانتقال في التخطيط.
تراكم انتقال التخطيط (CLS) هو أحد Core Web Vitals. الفيديو المُدمَج والصور دون أبعاد والإعلانات كلها يمكن أن تسبب CLS — الحل بتحديد عرض/ارتفاع صريح (يستخدمه المتصفح لحساب نسبة العرض إلى الارتفاع) أو استخدام خاصية CSS aspect-ratio.
أسئلة شائعة
›ما الفرق بين 16:9 و1.78:1؟
النسبة ذاتها بتدوين مختلف. 16/9 = 1.778. صيغة النقطتين متعارفة في التلفزيون/الويب؛ صيغة العشري متعارفة في السينما.
›كيف أحافظ على نسبة العرض إلى الارتفاع في CSS؟
استخدم خاصية aspect-ratio: img { aspect-ratio: 16/9; width: 100%; height: auto; }. تملأ الصورة عرض الحاوية ويتكيف الارتفاع للحفاظ على النسبة.
›لماذا يبدو الفيديو خاطئًا على تلفزيون 4:3؟
معظم الفيديوهات الحديثة بنسبة 16:9. على شاشة 4:3 تحصل إما على أشرطة سوداء أفقية (letterbox) أو عمودية (pillar-box) أو تمدد. تتحكم إعدادات التلفزيون في أيها يظهر.
›هل يمكنني استخدام نسب غير صحيحة؟
نعم — اكتب 1.5 أو 2.39. تعاملها الحاسبة كأعشار؛ مخرجات النسبة المبسَّطة تظهر فقط للنسب الصحيحة.
›ما 'نسبة أبعاد البكسل'؟
مفهوم منفصل: شكل بكسل بعينه. تستخدم الشاشات الحديثة بكسلات مربعة (1:1). استخدمت بعض صيغ الفيديو SD القديمة بكسلات غير مربعة (مثلًا 1.0667 لـ NTSC widescreen). تتعامل هذه الحاسبة مع نسبة أبعاد العرض، لا نسبة أبعاد البكسل.
›ما 'المظهر السينمائي'؟
21:9 (بشكل أدق 2.39:1 أو 2.40:1) — أعرض من HDTV. شائع في الأفلام الضخمة الحديثة. كثيرًا ما تقدم خدمات البث الأفلام بهذه النسبة.
›لماذا تستخدم Instagram Reel/TikTok نسبة 9:16؟
لأن الهواتف تُمسك عموديًا في الغالب. 9:16 تملأ شاشة الهاتف كاملةً بالمحتوى؛ 16:9 تترك أشرطة أعلى وأسفل الهاتف العمودي.
›هل تغادر البيانات متصفحي؟
لا. يعمل الحساب محليًا.
أدوات ذات صلة
آخر تحديث: