حاسبة نسبة الأبعاد

أوجد البُعد الناقص لأي نسبة أبعاد، وانظر مقاسات الفيديو والطباعة والتواصل الشائعة دفعة واحدة.

تتم المعالجة على جهازك — بلا رفع

termiva ratio --16:9
النسب الشائعة
  • 16:9أبسط صورة لـ 1920 × 1080
  • 1.7778عشريًا — العرض مقسومًا على الارتفاع
  • aspect-ratio: 16 / 9;خاصّية CSS — تحجز المساحة قبل تحميل الصورة

ضبط aspect-ratio على حاوية صورة هو علاج قفز الصفحة مع وصول الصور. فالمتصفّح يحجز القدر الصحيح من المساحة فورًا بدل إعادة تدفيق كل شيء بعد تنزيل الملف — وذلك معظم ما تتكوّن منه درجة سيّئة في إزاحة التخطيط التراكمية.

النسبة 16:9الناتج 1920 × 1080عشري 1.7778لا شيء مرفوع

كيف تحسب نسبة أبعاد

  1. اختر نسبة.
  2. اكتب البُعد الذي تعرفه.
  3. اقرأ الآخر.

كيف يعمل

نسبة الأبعاد هي العرض مقسومًا على الارتفاع، معبَّرًا عنها بعددين صحيحين. فـ16:9 تعني ستّ عشرة وحدة عرضًا لكل تسع نزولًا، وهي 1.7778 — وشاشة 1920 × 1080 وفيديو 1280 × 720 وتلفاز 3840 × 2160 كلها الشكل نفسه.

واكتب بُعدًا واحدًا فيتبعه الآخر. فالحقل الذي حرّرته آخرًا هو الذي يبقى ثابتًا. والصورة المختزلة تحته تجيب عن السؤال من الاتجاه الآخر: إن كان لديك 1512 × 982، فأي نسبة تلك؟ اقسم الاثنين على قاسمهما المشترك الأكبر فتحصل عليها.

وخاصّية CSS هي الجزء الأهمّ. فضبط aspect-ratio: 16 / 9 على حاوية يجعل المتصفّح يحجز المساحة الصحيحة بالضبط قبل أن تُنزَّل الصورة أو الفيديو. وبدونها يكون الصندوق بارتفاع صفر حتى يصل الملف ثم يقفز كل ما تحته نزولًا — وهو معظم ما تتكوّن منه درجة سيّئة في «إزاحة التخطيط التراكمية»، وهي أحد مؤشّرات الويب الأساسية.

وبعض النسب ليست أعدادًا صحيحة. فورق A4 نسبته 1:√2، اختيرت ليعطي طيّه نصفين الشكل نفسه من جديد — ولهذا يتناسب A4 وA5 وA3 كلها. والإعداد المسبق هنا يقاربها بـ1414:1000، وهي دقيقة إلى أربع منازل عشرية وأيسر كتابةً بكثير.

مثال عملي

حالة حقيقية. تحتاج مصغَّرة بعرض 400 بكسل، تطابق فيديوك بنسبة 16:9. اكتب 400 في العرض فتحصل على 225. لا 240، وهو ما تحصل عليه بتنصيف 480 بلا تفكير، ولا 250، وهو ما يبدو صحيحًا تقريبًا. فتسعة أجزاء من ستّة عشر من 400 هي 225، وكل ما عداها يمطّ الوجوه.

والنسب العمودية هي التي يخطئ فيها الناس. فـ9:16 ليست 16:9 مدارةً في رأسك. بل هي رقم آخر، وقصص إنستغرام وتيك توك ويوتيوب شورتس تستعملها كلها. اضغط «أدرها على جنبها» وراقب الأبعاد تتبادل تبادلًا صحيحًا.

و1.91:1 هي التي لا يتذكّرها أحد. إنها نسبة معاينة Open Graph — 1200 × 630 — وليست 16:9 ولا 2:1. فصورة مشاركة صُنعت بنسبة 16:9 تُقصّ من أعلى وأسفل، وهكذا ينتهي شعار بحوافّ محلوقة في كل خلاصة. ومولّد وسوم الميتا يعلن الأبعاد؛ وهذه تخبرك ماذا ينبغي أن تكون.

احتواء أو تغطية أو لا هذا ولا ذاك. فإن كان مصدرك بنسبة تختلف عن هدفك، فلا بدّ أن يتنازل شيء. object-fit: contain يعرضه كله ويترك أشرطة؛ وcover يملأ الصندوق ويقصّ. أما مطّه — بلا object-fit إطلاقًا، والبُعدان مفروضان — فهو الجواب الخاطئ الوحيد فعلًا، وهو ما يحدث افتراضيًا.

ولتغيير صورة إلى هذه الأبعاد فعلًا، مغيّر المقاس يُبقي النسبة عنك، والقاصّ يتولّى الحالة التي يجب أن تتغيّر فيها النسبة.

أسئلة

كم تساوي 16:9 عشريًا؟

1.7778. وشاشة 1920 × 1080 وفيديو 1280 × 720 وتلفاز 3840 × 2160 كلها هذا الشكل بالضبط.

ما نسبة أبعادي؟

اكتبها في حقلَي العرض والارتفاع — فتُعرض أبسط صورة تحتهما، مختزلةً بالقاسم المشترك الأكبر.

لماذا تقفز صفحتي أثناء تحميل الصور؟

لأن لا شيء حجز المساحة. اضبط aspect-ratio على الحاوية، أو سمتَي width وheight على الصورة، فيحتفظ المتصفّح بالمكان من البداية.

أي نسبة ينبغي أن تكون صورة معاينة اجتماعية؟

1.91:1 — أي 1200 × 630 عادةً. وهي ليست 16:9، واستعمال 16:9 يجعل صورتك تُقصّ من أعلى وأسفل.

ما نسبة ورق A4؟

1:√2، أي نحو 1:1.414. وقد اختيرت ليعطي طيّ الورقة نصفين الشكل نفسه، ولهذا يتناسب كل مقاس A مع كل مقاس آخر.

كيف أُلائم صورة بنسبة خاطئة؟

object-fit: cover يملأ الصندوق ويقصّ؛ وcontain يعرض كل شيء ويترك أشرطة فارغة. وفرض البُعدين يمطّ الصورة وهو خاطئ دائمًا.

هل تعمل aspect-ratio في كل مكان؟

نعم، في كل متصفّح حالي. وحيلة padding-top بالنسبة المئوية الأقدم ما زالت تعمل لكنها لم تعد ضرورية.

ما 21:9؟

فائقة العرض — أقرب إلى 64:27 عمليًا. والسينما تستعمل 2.39:1، وهي أعرض بعد، وهي سبب وجود أشرطة سوداء في الأفلام حتى على شاشة فائقة العرض.

هل حاسبة نسبة الأبعاد مجاني على الإنترنت؟

نعم — مجاني، بلا حساب، وبلا حد يومي، وبلا علامة مائية. يعمل في متصفّحك عبر الإنترنت، ولأن المعالجة تجري على جهازك فإنه يستمر في العمل دون اتصال بعد تحميل الصفحة.

للقراءة