منشئ aspect-ratio في CSS

كيف يعمل

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

لماذا نستخدم aspect-ratio بدلًا من ارتفاع ثابت؟

الارتفاع الثابت بالبكسل يُفسد التخطيط على شاشة أضيق أو أعرض؛ أما aspect-ratio فيحافظ على النسبة الصحيحة بين العرض والارتفاع مهما كان الحجم الفعلي للعنصر، وهو مفيد بشكل خاص لمقاطع الفيديو المتجاوبة وبطاقات الصور والصور المصغّرة في المعارض.

ماذا تعني النسبة المبسّطة المعروضة؟

تختزل الأداة تلقائيًا نسبة العرض إلى الارتفاع إلى أبسط صورة (فمثلًا تصبح 1920 / 1080 هي 16 / 9) بفضل القاسم المشترك الأكبر، مما يعطي قيمة أوضح وأسهل في إعادة الاستخدام في ورقة الأنماط.

معالجة محلية 100%: يُنفَّذ الحساب والمعاينة في متصفحك فقط.