ForHosting KIT · تحرير الصور وتحليلها

حاسبة نسبة الأبعاد في CSS وقيمة padding-top المتجاوبة

تحوّل حاسبة نسبة الأبعاد في CSS العرض والارتفاع إلى نسبة padding-top المستخدمة في أسلوب الصندوق المتجاوب التقليدي.

● Betaمجاني · داخل متصفحك

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

أدخلوا أبعادًا موجبة، مثل 16 و9، لتحصلوا على قيمة مئوية جاهزة للنسخ. تفيد الأداة في صيانة أوراق الأنماط القديمة، وإنشاء حلول توافق احتياطية، وتوليد حاويات للوسائط المضمّنة من أبعاد محفوظة. العملية حتمية، ولا تحتفظ بالبيانات، وتعطي النتيجة نفسها في المتصفح وعبر API.

حوّلوا الأبعاد إلى مساحة رأسية متجاوبة

يحسب CSS الحشو الرأسي المحدد بنسبة مئوية اعتمادًا على عرض الكتلة الحاوية. وبفضل هذا السلوك يمكن حجز الارتفاع المناسب قبل تحميل صورة أو فيديو أو iframe أو أي عنصر مضمّن آخر. تقسم الحاسبة الارتفاع المدخل على العرض، ثم تضرب الناتج في مئة وتضيف علامة النسبة المئوية. لذلك تنتج الأبعاد العريضة المألوفة 16 إلى 9 قيمة يمكن وضعها مباشرة في تعريف padding-top. لا يلزم أن تكون الأبعاد بالبكسل أو أن تصف ملفًا كبيرًا؛ يكفي أن تستخدم الوحدة نفسها لأن النسبة بينهما هي المؤثر الوحيد. فالملف بأبعاد 1600 في 900، والصورة المصغرة 160 في 90، والإطار 16 في 9 تحجز جميعها المساحة النسبية ذاتها. استخدموا رقمين موجبين ومحدودين. تُرفض القيم المفقودة أو الصفرية أو السالبة أو غير الرقمية بدلًا من إنتاج CSS مضلل أو غير قابل للاستخدام.

طبّقوا النسبة كحل احتياطي في CSS

القيمة المحسوبة مخصصة لنمط الصندوق التقليدي ذي النسبة الجوهرية. ضعوا النسبة في padding-top للحاوية، واجعلوا موضعها نسبيًا، ثم ضعوا العنصر الابن بصورة مطلقة ليملأ المساحة المحجوزة. عندئذ تتبع الحاوية العرض المتاح، بينما يحافظ الحشو الرأسي على النسبة المطلوبة. يوفر CSS الحديث الخاصية aspect-ratio، وهي أوضح عادةً في الشيفرة الجديدة، لكن الصناديق المبنية على الحشو تظل مفيدة في أوراق الأنماط القديمة، وحلول التوافق، والمقاطع المولدة، والمشروعات التي تعتمد هذا الأسلوب مسبقًا. تعاملوا مع الناتج بوصفه نص CSS لا نسبة جديدة. إذا كان عرض المصدر 4 وارتفاعه 3، فأدخلوا القيم بهذا الترتيب؛ عكسهما ينشئ صندوقًا رأسيًا عمدًا. لا تفحص الأداة ملف الصورة ولا تستنتج اتجاهه، بل تنفذ التحويل المطلوب صراحةً بنتيجة قابلة للتوقع ومناسبة لقوالب التوليد وأدوات الترحيل.

اختاروا الأبعاد وافهموا دقة النتيجة

استخدموا العرض والارتفاع الجوهريين عندما تريدون مطابقة الحاوية لملف حقيقي، أو استخدموا أبعاد التصميم لحجز موضع مخطط له. تُقبل القيم الكبيرة ما دامت موجبة ومحدودة، لكن تصغير الرقمين بالعامل نفسه لا يغير النتيجة. تدعم الأداة الأعداد العشرية أيضًا، وهو أمر مفيد عندما تأتي النسبة من قياسات التخطيط بدلًا من أبعاد وسائط صحيحة. تُنسّق النتيجة كسلسلة مئوية موجزة مع دقة معنوية كافية لتخطيطات CSS العملية. قد تقرّب المتصفحات أجزاء البكسل عند عروض معينة للنافذة، ولذلك لا تضمن النسبة الدقيقة رياضيًا وقوع كل حافة على بكسل كامل في الجهاز. هذا سلوك طبيعي للتخطيط وليس تغييرًا في نسبة الأبعاد. عند توفر الدعم الحديث، اجعلوا aspect-ratio القاعدة الأساسية واستخدموا قيمة الحشو المحسوبة للحل الاحتياطي فقط. يكلف كل طلب حتمي عبر API مبلغ $0.002، بينما ينفذ المتصفح العملية الحسابية النقية نفسها محليًا.

حالات الاستخدام

حجز مساحة لفيديو متجاوب

حوّلوا أبعاد الفيديو الأصلية إلى padding-top يمنع تحرك التخطيط قبل تحميل المشغّل.

توليد حلول احتياطية لنسبة الأبعاد

أنشئوا تعريفات تعتمد على الحشو أثناء الانتقال التدريجي إلى الخاصية الحديثة aspect-ratio.

إنشاء قوالب للوسائط المضمّنة

حوّلوا بيانات العرض والارتفاع المحفوظة إلى نسبة مئوية عند توليد iframe أو صورة أو مكوّن.

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

ما المعادلة التي تستخدمها الحاسبة؟

تقسم الارتفاع على العرض، ثم تضرب القيمة في مئة وتعيد الناتج مع علامة النسبة المئوية.

لماذا يحافظ الحشو الرأسي المئوي على النسبة؟

لأن CSS يحسبه من عرض الكتلة الحاوية، فتتغير المساحة الرأسية بالتناسب مع ذلك العرض.

هل يُفضّل padding-top أم الخاصية aspect-ratio؟

استخدموا aspect-ratio في الشيفرة الحديثة، والقيمة المحسوبة للتوافق أو الأنماط القائمة أو الحلول الاحتياطية.

هل يمكن أن يكون العرض والارتفاع عددين عشريين؟

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

ماذا يحدث إذا كان أحد البعدين صفرًا أو سالبًا؟

يفشل الطلب بخطأ إدخال غير صالح، لأن هذه القيم لا تعرّف صندوقًا متجاوبًا صالحًا.

كم تبلغ تكلفة طلب API؟

يكلف كل طلب API مبلغ $0.002. وتتوفر العملية الحسابية الحتمية نفسها في المتصفح أيضًا.

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/image/css-aspect-ratio

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/image/css-aspect-ratio \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"width":16,"height":9}'

const res = await fetch("https://api.kit.forhosting.com/image/css-aspect-ratio", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "width": 16,
    "height": 9
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/css-aspect-ratio",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "width": 16,
    "height": 9
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/css-aspect-ratio", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"width":16,"height":9}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"width":16,"height":9}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/css-aspect-ratio", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "width": 16,
  "height": 9
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.css_aspect_ratio",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`max_mb`	15
`max_megapixels`	12

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

اطّلع على توثيق KIT الكامل ←