نسبة الأبعاد

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 أو عنوان.

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