مُحول صندوق نسبة الجانب أنشئ صناديق نسبة جانبية مستجيبة باستخدام نهج CSS الحديث والموروث.
مُحول صندوق نسبة الجانب
أنشئ صناديق نسبة جانبية مستجيبة باستخدام نهج CSS الحديث والموروث.
اختر نسبة جانبية مسبقة أو مخصصة
اختر من بين النسب الجانبية الشائعة (16:9، 4:3، 1:1) أو أدخل قيم مخصصة.
تكوين الصندوق
حدد الحد الأقصى للعرض واللون الخلفي واختر بين نهج CSS الحديث أو التقليدي.
نسخ كود CSS
معاينة صندوق النسبة الجانبية ونسخ كود CSS.
What Is مُحول صندوق نسبة الجانب?
مُحول صندوق النسبة الجانبية يخلق حاويات استجابة تحتفظ بنسبة عرض إلى ارتفاع محددة بغض النظر عن حجمها. الحفاظ على نسب الجانب أمر ضروري للفيديوهات والصور والبطاقات وأي عنصر يتطلب أبعاد متناسبة. يوفر هذا الأداة ثمانية إعدادات مسبقة شائعة: 1:1 (مربع)، 4:3 (معيار)، 16:9 (شاشة عريضة)، 21:9 (فائق العرض)، 3:2 (صورة فوتوغرافية)، 9:16 (منظر منحرف)، 2:3 (ملصق إعلاني)، و 3:4 (لوحي). يمكنك أيضًا تعيين قيم نسبة مخصصة. يدعم الأداة كلاً من خاصية CSS الحديثة aspect-ratio وتقنية padding-bottom التراثية لضمان دعم المتصفحات الأوسع. يظهر المعاينة صندوق النسبة الجانبية مع أقصى عرض و لون خلفية قابلين للتخصيص، ويحتوي الكود الناتج عن CSS على النهج المختار.
Why Use مُحول صندوق نسبة الجانب?
-
ثمانية نسب جانبية مسبقة شائعة بالإضافة إلى الإدخال المخصص
-
كلا النهجين الحديث (aspect-ratio) والتقليدي (padding-bottom) لCSS
-
حد أقصى للعرض قابل للتخصيص ولون خلفي
-
معاينة دقيقة تظهر الصندوق النسبي
Common Use Cases
حاويات الفيديو
إنشاء حاويات استجابة بحجم 16:9 للفيديوهات المضمنة.
مساحات الاحتياطي للصور
تحفظ مساحة للصور أثناء تحميلها لمنع تحrick في التصميم.
بطاقات استجابة
الحفاظ على أبعاد البطاقات الثابتة عبر أحجام الشاشات المختلفة.
صالات العرض
إنشاء حاويات صور موحدة لتصميمات شبكة الصالة.
Technical Guide
تحدد خاصية CSS الحديثة aspect-ratio نسبة الجانب المفضلة مباشرة: aspect-ratio: 16 / 9. يحسب المتصفح تلقائيًا الارتفاع بناءً على عرض العنصر. يتم دعم هذا في جميع المتصفحات الحديثة منذ عام 2021. تستخدم التقنية التراثية padding-bottom كنسبة مئوية من العرض (منذ أن تكون النسب المئوية لل.padding نسبة إلى عرض الوالدين): padding-bottom: 56.25% يخلق نسبة 16:9 (9/16 * 100 = 56.25%). تتطلب النهج التراثي position: relative على الحاوية و position: absolute; top: 0; left: 0; width: 100%; height: 100% على محتوى الطفل. نهج حديث أكثر بساطة وقابلية للقراءة. كلاً من الطريقتين يخلقان حاويات استجابة تحتفظ بنسبة الجانب عند أي عرض. خاصية max-width تحدد حجم الحاوية.对于 الصور،تحكم خاصية object-fit في كيفية ملء الصورة لحاوية النسبة الجانبية.
Tips & Best Practices
-
1استخدم خاصية aspect-ratio الحديثة للحصول على كود أنظف وأبسط
-
2الرجوع إلى تقنية padding-bottom لدعم المتصفحات القديمة
-
3استخدام object-fit: cover على الصور داخل حاويات النسبة الجانبية
-
4تعيين الحد الأقصى للعرض لمنع صندوق من أن يصبح كبيرًا جدًا على الشاشات الواسعة
Related Tools
مسرح تجريبي ل CSS Flexbox
مستكشف CSS Flexbox المرئي مع عناصر تحكم تفاعلية لجميع خصائص حاوية المرونة.
🎨 CSS & Design
ملعب CSS Grid
بناء CSS Grid بصروري مع عناصر تحكم تفاعلية لأعمدة القالب والصفوف والفراغات.
🎨 CSS & Design
مُختبر التصميم المرن
معاينة المواقع الإلكترونية في نقاط انقطاع الأجهزة الشائعة باستخدام عارض إطار متضمّن.
🎨 CSS & Design
مُولِد استفسارات الوسائط
إنشاء استفسارات الوسائط CSS مع شروط الميزات و نقاط التوقف المسبقة.
🎨 CSS & DesignFrequently Asked Questions
Q ما هي خاصية aspect-ratio في CSS?
Q هل تدعم خاصية aspect-ratio جميع المنصات?
Q ما هي حيلة padding-bottom؟
Q كيف يمكنني وضع المحتوى داخل صندوق النسبة الجانبية؟
Q هل يمكنني استخدام خاصية aspect-ratio مع الصور؟
About This Tool
مُحول صندوق نسبة الجانب is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.