نسبة الأبعاد

AspectRatio

حاوية نسبة أبعاد في React تثبّت المحتوى على نسبة مثل 16/9، فلا تتزحزح الصور والخرائط والتضمينات أثناء التحميل.

يثبّت AspectRatio العنصر داخله على نسبة محددة، فلا يتحرك التخطيط أثناء تحميل الوسائط. مرر ratio مثل "16/9" وحدد العرض، والارتفاع يتبعه.

متى تستخدمه

استخدم AspectRatio حول الصور والفيديو والخرائط وإطارات iframe لتُحجز المساحة قبل تحميل الوسائط. مرّر ratio واضبط العرض؛ يتبعه الارتفاع.

استخدم asChild لتطبيق النسبة على عنصر الصورة مباشرة.

نسبة 16 / 9

النسبة 1/1

النسبة 4/3

النسبة 16/9

النسبة 21/9

الخصائص التي يعرّفها AspectRatio. سمات العنصر الأصلي تمرّ كما هي.

الخاصية	النوع	الافتراضي	الوصف
`ratio`	`string \| number`		Width-to-height ratio, fed to the native CSS `aspect-ratio` property. Prefer the readable string form (`ratio="16/9"`) - it stays legible in the rendered DOM and is a true CSS `<ratio>`. The numeric form (`ratio={16 / 9}`) also works but JavaScript evaluates it to a float (`1.777…`), so the original intent is lost in dev tools. Default `1` (square).
`asChild`	`boolean`		Render the ratio onto the single child element (e.g. an `<img>` / `<video>`) via Radix `Slot`, instead of wrapping it in a `<div>`. Avoids an extra wrapper around media.

لا يضيف AspectRatio دلالات خاصة به. تحتاج الوسائط داخله إلى نص alt أو عنوان.

حجز المساحة يمنع القفزات في التخطيط التي تربك ذوي ضعف البصر أو الحساسية للحركة.