حاسبة نسبة العرض إلى الارتفاع: احصل على العرض والارتفاع بشكل صحيح في المرة الأولى

لقد قمت ذات مرة بشحن سمة WordPress حيث تبدو كل صورة مميزة على الهاتف المحمول وكأنها قد مرت عبر مشوه. امتدت الوجوه، وسحقت الشعارات. كان السبب ثلاثة أحرف في ملف CSS: أ height: 240px الجلوس بجانب أ width: 100%. على هاتف بدقة 375 بكسل أنتجت نسبة 1.56:1 تقريبًا، وكانت الصور 16:9 - 1.78:1. ليس فرقا كبيرا على الورق. واضح جدا على وجه الإنسان.

نسبة العرض إلى الارتفاع هي واحدة من تلك الأشياء التي تبدو بسيطة جدًا بحيث لا يمكن ارتكاب الأخطاء فيها، لذلك لا أحد يتحقق منها مرتين. إنه قسم واحد. ومع ذلك، فإنه يفسد بهدوء صادرات الفيديو، ومعاينات OpenGraph التي يتم اقتصاصها في المكان الخطأ، والصور المصغرة ذات الأشرطة السوداء، وصور الأبطال التي تبدو جيدة على شاشتك مقاس 27 بوصة وفظيعة على الهاتف. الرياضيات تافهة؛ تكلفة خطأ التقريب ليست كذلك.

أنا أبني تولز.ديف وأقوم بهذه العملية الحسابية باستمرار - تحديد حجم الصور لشاشات الإدارة الخاصة بالمكون الإضافي &#39؛، وتصدير الفيديو بتنسيق Reels، وتحديد الشكل الذي يجب أن تكون عليه صورة OpenGraph بالفعل. لذلك قمت ببناء حاسبة نسبة العرض إلى الارتفاع للقيام بذلك في مجال واحد وإظهار عمله. أعطها نسبة وبعدًا واحدًا، فهذا يعطيك البعد الآخر. أعطها حجمًا، فهي تقللها إلى النسبة وتخبرك بما تسمى هذه النسبة.

ليرة تركية؛DR: نسبة العرض إلى الارتفاع هي العرض مقسومًا على الارتفاع، ومكتوبًا كرقمين بنقطتين. للعثور على الارتفاع المفقود: width × (ratioHeight ÷ ratioWidth). للعثور على العرض المفقود: height × (ratioWidth ÷ ratioHeight). للحصول على النسبة من الحجم، اقسم كلا الرقمين على القاسم المشترك الأكبر بينهما - 1920 و1080، واشترك في GCD بقيمة 120، مما يعطي 16:9. ال حاسبة نسبة العرض إلى الارتفاع قم بتنفيذ الثلاثة في متصفحك، مع الإعدادات المسبقة لـ 16:9 و9:16 و1:1 و4:3 و3:2 و21:9 و1.91:1 و2.39:1.

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

نسبة العرض إلى الارتفاع هي العلاقة التناسبية بين عرض الصورة &#39؛ وارتفاعها. وهو مكتوب كرقمين يفصل بينهما نقطتان - 16:9، 4:3، 1:1 - وما يصفه هو شكل، وليس الحجم.

هذا التمييز هو اللعبة بأكملها. 1280 × 720، 1920 × 1080، و3840 × 2160 هي ثلاث دقة مختلفة بنسبة عرض إلى ارتفاع واحدة. إنهما نفس الشكل بثلاثة أحجام، ولهذا السبب يتدرج أي منهما إلى أي حجم آخر دون تشويه أو اقتصاص. وفي الوقت نفسه، فإن 1920 × 1080 و1920 × 1200 لهما نفس العرض تقريبًا، ويختلفان بمقدار 120 بكسل من الارتفاع، وهما شكلان مختلفان بشكل أساسي - أحدهما 16:9، والآخر 16:10، ووضع المحتوى المصمم لأحدهما في حاوية مصممة للآخر يعني letterboxing أو المحصول.

النسبة هي مجرد عرض ophit، ويتم التعبير عنها ككسر بأقل الحدود. 1920 <TAG2> 1080 = 1.777...، والكسر 1920/1080 ينخفض إلى 16/9. كلاهما نفس الحقيقة المذكورة بطريقتين: الشكل العشري أسهل في المقارنة (أعرض بـ 1.78 من 1.5؟ بوضوح)، ومن الأسهل قول شكل النقطتين.

الحسابات الثلاثة التي تحتاجها بالفعل

حل البعد المفقود

أنت تعرف الشكل وجانب واحد. هذه هي الحالة الأكثر شيوعًا في الممارسة العملية: &quot؛ أحتاج إلى صورة بنسبة 16:9 ويبلغ عرض الحاوية الخاصة بي 1280 بكسل - كم طولها؟&quot؛

height = width × (ratioHeight ÷ ratioWidth)
       = 1280 × (9 ÷ 16)
       = 720

وفي الاتجاه الآخر:

width = height × (ratioWidth ÷ ratioHeight)
      = 1080 × (16 ÷ 9)
      = 1920

في الآلة الحاسبة، اختر إعدادًا مسبقًا أو اكتب النسبة الخاصة بك، واملأ البعد الذي تعرفه، واترك البعد الآخر فارغًا، واضغط على "حساب". يملأ الحقل الفارغ ويظهر الحساب الموجود أسفله.

تقليل الحجم إلى نسبته

لديك حجم وتريد معرفة شكله - عادةً للتحقق من تطابق أصلين، أو لمعرفة ماهية التصدير الغامض للعميل &#39؛ في الواقع.

الطريقة هي القاسم المشترك الأكبر. ابحث عن أكبر رقم يقسم كلا البعدين بالتساوي واقسمهما عليه. بالنسبة لعامي 1920 و1080، هذا الرقم هو 120: 1920 < 120 = 16، 1080 < 120 = 9. النسبة 16:9.

هذا هو المكان الذي تصبح فيه الإجابات مثيرة للاهتمام، لأن أحجام العالم الحقيقي غالبًا ما تكون كذلك لا تقليل إلى نسبة صديقة للتسويق. شاشة فائقة الاتساع 3440 × 1440 تنخفض إلى 43:18. يتم تقليل شاشة 2560 × 1080 إلى 64:27. كلاهما يباعان كـ &quot؛21:9&quot؛ ولا يوجد أي منهما في الواقع - 21:9 سيكون 3360 × 1440. الملصق عبارة عن تقريب للرقم العشري (occ2.39:1 و occ2.37:1) إلى شيء يبدو مرتبًا بجوار 16:9. تمنحك الآلة الحاسبة النسبة المخفضة الحقيقية والعلامة العشرية، حتى تتمكن من تحديد الحجم من الواقع بدلاً من ورقة المواصفات.

التحجيم والتركيب

نوعان مختلفان من نفس الفكرة. التحجيم يضرب كلا البعدين بنفس العامل، والذي بحكم التعريف يحافظ على النسبة - مقياس 50% لعام 1920 × 1080 هو 960 × 540، ولا يزال 16:9. ملائم ينكمش حجم المصدر حتى يستقر داخل صندوق محيطي دون تشويه: خذ الأصغر منه boxWidth ÷ sourceWidth و boxHeight ÷ sourceHeight والمقياس بذلك. الصورة 4000 × 3000 المثبتة في صندوق 1200 × 1200 تصبح 1200 × 900. هذا هو بالضبط ما CSS object-fit: contain يفعل ذلك، وما تفعله CDN للصورة بالضبط عندما تطلب تغيير حجم البعد الأقصى.

الميزات الرئيسية للحاسبة نسبة العرض إلى الارتفاع

عشرة إعدادات مسبقة، مُصنفة بالمكان الذي يتم استخدامها فيه بالفعل

16:9 للفيديو القياسي ومعظم شاشات العرض. 9:16 للبكرات والسراويل القصيرة وTikTok والقصص. 1:1 للمشاركات الاجتماعية المربعة والصور الرمزية. 4:3 للشاشات القديمة وأجهزة iPad. 3:2 للتصوير الفوتوغرافي بتقنية DSLR والأفلام مقاس 35 مم. 2:3 للمطبوعات الشخصية. 5:4 للمطبوعات مقاس 8×10. 21:9 للواجهة فائقة الاتساع. 1.91:1 لصور معاينة رابط OpenGraph. 2.39:1 للشاشة العريضة المشوهة. يخبرك التمرير المسبق بالهدف، وهو أمر مهم أكثر من الرقم عندما تحاول تذكر ما يريده Instagram.

الصيغة تحت كل إجابة

لوحة النتائج توضح الحساب الدقيق - 1280 × (9 ÷ 16) = 720. جزئيًا حتى تتمكن من التحقق منه، وجزئيًا حتى تتمكن من رفعه إلى جدول بيانات أو برنامج نصي. إذا كنت ستقوم بتشفير بُعد ما في ملف CSS أو تكوين Tailwind، فيجب أن تكون قادرًا على معرفة مصدر الرقم.

النسبة المخفضة والعلامة العشرية والاسم

تشير كل نتيجة إلى التمثيلات الثلاثة: نسبة الأعداد الصحيحة المخفضة (16:9)، وشكلها العشري (1.778:1)، والاسم الشائع إذا كان يحتوي على واحد. العلامة العشرية هي ما تقارن به؛ الاسم هو ما تكتبه في ملخص التصميم.

ميغابكسل وإجمالي عدد البكسل

تتضمن كل نتيجة عدد البكسل بالميجابكسل. هذا هو الرقم الذي يتنبأ فعليًا باستخدام الذاكرة وحجم الملف عند تغيير حجم الصور - الصورة 4000 × 3000 بدقة 12 ميجابكسل، ومضاعفة أبعادها أربع مرات إلى 48 ميجابكسل، وليس مضاعفتها. إذا كنت تقوم بإنشاء مجموعات صور سريعة الاستجابة، فإن هذه العلاقة التربيعية هي الشيء الذي يجب الاحتفاظ به في رأسك. عند الانتهاء من التحجيم، تغيير حجم الصورة و ضغط الصورة قم بالعمل الفعلي في المتصفح.

معاينة الشكل المباشر

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

من جانب العميل، غير متصل بالإنترنت، لا يوجد تسجيل

حساب جافا سكريبت عادي في متصفحك. لا يتم إرسال أي شيء إلى أي مكان، ولا يتم تسجيل أي شيء، وتستمر الصفحة في العمل مع الشبكة.

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

ملاحظتان عمليتان. يتم تقليل حجم OpenGraph 1200 × 630 إلى 40:21، وهو رقم عشري قدره 1.905 - قريب بدرجة كافية من 1.91:1 بحيث يسميه الجميع كذلك، وهو الحجم الذي يعرضه كل من Facebook وLinkedIn وX بشكل نظيف. تحقق من النتيجة مع افتح معاينة الرسم البياني الأداة قبل شحنها، لأن صورة المعاينة التي تم اقتصاصها بشكل سيئ هي الخطأ الأكثر وضوحًا على الرابط الذي لا ينقر عليه أحد. و4:5 يستحق المعرفة بالنسبة إلى Instagram على وجه التحديد: فهو يشغل مساحة رأسية أكبر في الخلاصة من 1:1، وهو انتباه مجاني.

حالات الاستخدام الشائعة

تحجيم الصور المستجيبة دون تشويه

أنت تقوم ببناء شبكة بطاقات ويتطلب التصميم صورًا مصغرة بنسبة 16:9 بعرض حاوية يبلغ 384 بكسل. احسب: 384 × 9 < 16 = 216. الآن لديك حجم ملموس لكل من CSS الخاص بك aspect-ratio: 16 / 9 الإعلان وتصدير الصور الخاصة بك، وهم يتفقون مع بعضهم البعض. يجعل CSS الحديث هذا أسهل مما كان عليه من قبل - aspect-ratio في CSS يأخذ النسبة مباشرة ويتيح للمتصفح إجراء العمليات الحسابية - ولكنك لا تزال بحاجة إلى أبعاد البكسل للأصل نفسه.

تصدير الفيديو لمنصة معينة

لقد قمت بالتصوير بنسبة 16:9 وتحتاج إلى قطع عمودي بنسبة 9:16. يبقى الارتفاع عند عام 1920، وبالتالي فإن العرض هو 1920 × 9 < 16 = 1080. هذا هو حجم التصدير الخاص بك - والسبب في أن الأرقام تبدو مألوفة هو أن 1080 × 1920 هو ببساطة 1920 × 1080 مع تبديل المحاور، وهو ما &quot؛ فيديو عمودي وحاصل؛ يقصد.

شيء واحد لن تفعله الآلة الحاسبة لك: يتطلب H.264 أبعادًا زوجية. إذا هبطت حساباتك على رقم فردي، فقم بتقريب الجانب الفردي لأسفل بمقدار بكسل واحد وإلا سيرفض برنامج التشفير الخاص بك المهمة.

معرفة ما هو الأصل الغامض في الواقع

يرسل العميل الأصول بسعر 1440 × 1800 ويسأل عن سبب ضعفها على الصفحة الرئيسية. تقليله: GCD لعامي 1440 و1800 هو 360، مما يعطي 4:5. فتحات صفحتك الرئيسية هي 16:9. لا يمكن تلبية هذين الشكلين دون الاقتصاص - الآن لديك إجابة ملموسة وقرار يجب اتخاذه، بدلاً من شعور غامض بأن شيئًا ما قد توقف.

التحقق من أن مجموعة الأصول متسقة

قبل الإطلاق، قم بتشغيل كل صورة بطل وأبعاد #39؛s من خلال وضع النسبة. إذا عاد واحد من الثلاثين إلى 1.6:1 بينما الباقي هو 1.778:1، فقد وجدت الأصل الذي سيبدو خاطئًا بمهارة على الموقع المباشر، وقد وجدته قبل أن يفعله المستخدم.

ملاحظات فنية تستحق المعرفة

التقريب. معظم حسابات النسبة لا تهبط على وحدات البكسل الكاملة. 16:9 بعرض 1000 يعطي ارتفاعًا قدره 562.5. تدور الآلة الحاسبة إلى أقرب بكسل كامل، بحيث تحصل على 563 - وهو شكل يساوي 1.7762:1 بدلاً من 1.7778:1، وهو فرق يبلغ حوالي عُشر واحد بالمائة، وغير مرئي. لا تطارده. لاحظ هذا التقريب باستمرار تحت عبر مجموعة الصور، يمكن أن يتراكم انحراف مرئي إذا كنت تقوم بتكديس العناصر؛ قم بالتقريب من البعد المصدر في كل مرة وليس من النتيجة السابقة.

نسبة العرض إلى الارتفاع للبكسل مقابل نسبة العرض إلى الارتفاع. في بث الفيديو، يمكن أن تختلف هذه: لقطات الفيديو الرقمية القديمة مخزنة 720 × 480 بكسل ولكنها تعرضها على أنها 4:3 بجعل كل بكسل غير مربع. لا شيء تقريبًا تلمسه اليوم يفعل هذا - كل شيء عبارة عن بكسلات مربعة - ولكن إذا كنت تعمل مع اللقطات القديمة وترفض الرياضيات جمعها، فهذا هو السبب.

aspect-ratio في CSS. منذ عام 2021 يمكنك الكتابة aspect-ratio: 16 / 9 ودع المتصفح يحتفظ بالشكل بينما يكون أحد الأبعاد سلسًا. استخدمه. فهو يزيل فئة كاملة من اختراقات النسبة المئوية العلوية للحشو التي كانت ضرورية، ويعني أن تخطيطك يظل صحيحًا عند العروض التي لم تختبرها مطلقًا. ما زلت تريد الآلة الحاسبة لتصدير الأصول، لأن ملف الصورة يجب أن يكون عددًا حقيقيًا من وحدات البكسل.

الاقتصاص ليس تحجيمًا. إذا اختلفت نسبة المصدر والهدف، فلا يمكنك تغيير الحجم بينهما - يجب عليك الاقتصاص أو صندوق البريد أو التشويه. اختر عمدا. object-fit: cover المحاصيل (وعادة ما تريده للصور)، contain صناديق البريد (عادةً ما تريده للشعارات)، و fill يشوه (تقريبًا ما تريده أبدًا، وسبب خطأ الوجوه المشوهة في الجزء العلوي من هذه المقالة).

أسئلة وأجوبة

كيف أحسب نسبة العرض إلى الارتفاع من العرض والارتفاع؟

قسّم كلا الرقمين على أكبر مقسوم مشترك. بالنسبة لـ 1920 × 1080 ، يكون GCD هو 120 ، وبالتالي تنخفض النسبة إلى 16: 9. قم بتبديل هذه الآلة الحاسبة للحصول على وضع النسبة ، أدخل كلا البعدين ، ويقوم بالتخفيض وتسمية النسبة لك.

ما الارتفاع الذي أحتاجه لصورة 16: 9 بعرض 1280 بكسل؟

اضرب العرض في 9 واقسم على 16: 1280 × 9 16 = 720. لذا فإن عرض 16: 9 بعرض 1280 بكسل 720 بكسل. أدخل 16: 9 مسبقًا وعرض 1280 لتأكيد ذلك.

ما الفرق بين نسبة العرض إلى الارتفاع والدقة؟

نسبة العرض إلى الارتفاع هي الشكل - نسبة العرض إلى الارتفاع. الدقة هي عدد البكسل الفعلي. 1280 × 720 و1920 × 1080 دقة مختلفة بنفس نسبة العرض إلى الارتفاع 16:9، ولهذا السبب يتم قياس أحدهما للآخر دون تشويه أو اقتصاص.

ما هي نسبة العرض إلى الارتفاع التي يجب أن أستخدمها لوسائل التواصل الاجتماعي؟

استخدم 1:1 أو 4:5 لمنشورات موجز Instagram، و9:16 للبكرات والقصص وTikTok وYouTube Shorts، و16:9 لفيديو YouTube القياسي، و1.91:1 لـ افتح الرسم البياني ربط صور المعاينة على Facebook وLinkedIn وX. تتضمن الإعدادات المسبقة في هذه الأداة كل هذه العناصر.

لماذا تبدو صورتي التي تم تغيير حجمها ممتدة؟

العرض والارتفاع الجديدان لا يتطابقان مع النسبة الأصلية، لذلك يتم سحق الصورة على طول محور واحد. احسب ارتفاع الهدف من عرض الهدف الخاص بك باستخدام النسبة الأصلية بدلاً من كتابة كلا الرقمين يدويًا - وهذا هو بالضبط الغرض من وضع حل الجانب المفقود.

ماذا يعني 21: 9 في الواقع؟

إنها علامة تسويقية لشاشات العرض فائقة الاتساع. النسبة الحقيقية للشاشة 3440 × 1440 هي 43:18، تقريبًا 2.39:1، واللوحة 2560 × 1080 هي 64:27. يتم تقريب كلاهما إلى &quot؛21:9&quot؛ في قوائم المنتجات. إذا كنت بحاجة إلى أبعاد بكسل دقيقة، فاحسب من دقة اللوحة الحقيقية بدلاً من الملصق.

كيف أحافظ على نسبة العرض إلى الارتفاع عندما لا تكون النتيجة عددًا صحيحًا؟

تدور الآلة الحاسبة إلى أقرب بكسل كامل، مما يقدم على الأكثر نصف بكسل من الانجراف - غير مرئي في الممارسة العملية. تعد أجهزة تشفير الفيديو أكثر صرامة: تتطلب H.264 أبعادًا زوجية، لذا قم بتقريب الجانب الفردي لأسفل بمقدار بكسل واحد إذا رفض جهاز التشفير حجمك.

هل تعمل هذه الآلة الحاسبة في وضع عدم الاتصال؟

نعم. كل عملية حسابية هي عملية حسابية جافا سكريبت تعمل في متصفحك. لا يتم إرسال أي أبعاد إلى الخادم ، ولا يتم تسجيل أي شيء ، وتستمر الأداة في العمل بدون اتصال بالإنترنت بمجرد تحميل الصفحة.

الأدوات ذات الصلة

• تغيير حجم الصورة- قم بتطبيق الأبعاد التي حسبتها للتو في المتصفح
• ضغط الصورة- قم بتقليص الملف بمجرد أن يصبح الشكل صحيحًا
• حاسبة النسبة المئوية- لنصف حجم الوظيفة بالنسبة المئوية
• افتح معاينة الرسم البياني- تحقق من تلك الصورة 1.91:1 قبل شحن الرابط
• محول التنسيق- ويب بي وavif للأصول التي قمت بقياسها للتو

مزيد من القراءة: الدليل الكامل لضغط الصور و أدوات الصور الأساسية للويب.