كيفية الاستخدام
- لتغيير الحجم، أدخل النسبة (مثل 16 و9) أو اختر نسبة شائعة، ثم أدخل العرض أو الارتفاع. سيُحسب البُعد الآخر.
- لإيجاد النسبة، أدخل عرض صورة أو شاشة أو فيديو وارتفاعه.
- تحقق من المعاينة وانسخ قاعدة CSS aspect-ratio إذا احتجت إليها في تخطيط صفحة ويب.
كيف تعمل الأداة
يعتمد تغيير الحجم مع الحفاظ على التناسب على المعادلة: الارتفاع = العرض × ارتفاع النسبة ÷ عرض النسبة، والعكس صحيح. تكون أبعاد البكسل عادةً أعدادًا صحيحة، لذا قد تُقرّب النتيجة. وعندما لا تقبل النسبة القسمة دون باقٍ، مثل 16:9 عند عرض 1000، يكون الارتفاع المقرّب (563) تقديرًا قريبًا لا تطابقًا دقيقًا.
يُبسّط الحجم بقسمة طرفيه على القاسم المشترك الأكبر: يشترك 1920 و1080 في القاسم 120، فتكون النسبة 16:9. ولا يمكن اختزال بعض الأحجام الفعلية إلى نسبة مألوفة. فالأبعاد 1366×768 تعادل تمامًا 683:384، وهي قريبة جدًا من 16:9؛ لذلك تعرض الأداة أيضًا أقرب نسبة شائعة عندما يكون الفرق ضمن 2٪. وبالمثل، فإن الشاشات التي تُسوّق على أنها «21:9» تكون في الواقع بنسبة 64:27 (2560×1080) أو 43:18 (3440×1440)؛ أما 21:9 فهو اسم تسويقي.
في CSS، تجعل الخاصية aspect-ratio: 16 / 9 العنصر يحافظ على شكله مع تغيّر عرضه. وهذا مفيد لتضمين الفيديوهات والعناصر النائبة للصور التي ينبغي ألا تغيّر تخطيط الصفحة أثناء التحميل.
أمثلة
أبعاد الصورة المصغّرة للفيديو
إذا كان عرض الصورة المصغّرة بنسبة 16:9 يجب أن يكون 1280 بكسل، فيلزم أن يكون ارتفاعها 720 بكسل.
تحديد نسبة أبعاد الشاشة
تُختزل الأبعاد 2560×1600 إلى 8:5، وهي النسبة نفسها 16:10 الشائعة في الحواسيب المحمولة.
اقتصاص عمودي لوسائل التواصل الاجتماعي
بنسبة 4:5 وعرض 1080، يكون الارتفاع 1350، وهو مقاس عمودي تقبله منصات كثيرة.
الأسئلة الشائعة
هل 16:9 هي نفسها 1.78:1؟
نعم. 16 ÷ 9 ≈ 1.778، لذا فهما يصفان الشكل نفسه. وغالبًا ما تُعرض نسب صيغ السينما بالأرقام العشرية، مثل 2.39:1.
لماذا تظهر أرقام عشرية في النتيجة؟
لا تقبل كل قيمة عرض القسمة على النسبة دون باقٍ. فعّل التقريب لأبعاد البكسل؛ عندها تكون النتيجة أقرب عدد صحيح من البكسلات، وقد تختلف عن النسبة الدقيقة بمقدار جزء من البكسل.
هل تعمل خاصية CSS aspect-ratio في جميع المتصفحات؟
هذه الخاصية مدعومة في جميع المتصفحات الرئيسية الحديثة. إذا كان للعنصر عرض وارتفاع محددان صراحةً أيضًا، فلهما الأولوية على aspect-ratio.
الخصوصية
تُجرى جميع العمليات الحسابية في متصفحك. لا يُرسَل أي شيء ولا يُخزَّن.