نسبة العرض إلى الارتفاع

import Image from "next/image"

import { AspectRatio } from "@/components/ui/aspect-ratio"

يقفل Aspect ratio أبناءه بنسبة عرض إلى ارتفاع ثابتة — 16:9، مربّع، عمودي — فتتوسّع الوسائط مع الحاوية بدل إعادة تدفق الصفحة. هذه النسخة غلاف بلا تبعيات فوق خاصية CSS aspect-ratio (لا يوفر Base UI عنصر aspect-ratio أساسيًا) وغير مزيَّنة عمدًا: حدود وظلال النيوبروتالية تأتي من البطاقة التي تضع فيها الغلاف.

استخدمه عندما:

• شبكات الصور والمصغّرات — توحيد أبعاد مصادر مختلطة في بطاقات متساوية.
• تضمين الفيديو والخرائط — احجز فتحة 16:9 حتى لا يحرّك الـ iframe التخطيط أثناء التحميل.
• وسائط البطل المتجاوبة — وسّع العمل الفني مع عرض العمود دون ارتفاعات ثابتة.

التثبيت#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
npx shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
نسخ

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
نسخ

"use client"

import { AspectRatio as AspectRatioPrimitive } from "radix-ui"

function AspectRatio({
  ...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
}

export { AspectRatio }

الاستخدام#

نسخimport { AspectRatio } from "@/components/ui/aspect-ratio"

نسخ<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>

أمثلة#

مربّع#

مكوّن نسبة أبعاد مربّعة يستخدم خاصية ratio={1 / 1}. مفيد لعرض الصور بتنسيق مربّع.

import Image from "next/image"

import { AspectRatio } from "@/components/ui/aspect-ratio"

طولي#

مكوّن نسبة أبعاد طولية يستخدم خاصية ratio={9 / 16}. مفيد لعرض الصور بتنسيق طولي.

import Image from "next/image"

import { AspectRatio } from "@/components/ui/aspect-ratio"

RTL#

لتفعيل RTL في Neobrutalism، راجع دليل إعداد RTL.

"use client"

import * as React from "react"

إمكانية الوصول#

AspectRatio يعرض div عاديًا — عرضي بحت، بلا دور أو سمات ARIA. إمكانية الوصول تعيش مع المحتوى داخله: امنح الصور نص alt ذا معنى (أو alt="" إن كانت زخرفية) وامنح إطارات iframe المضمّنة title. وبما أن النمط المعتاد يقتص بـ object-cover، تجنّب صورًا تحمل معلومات على الحواف المقتصة.

مرجع API#

AspectRatio#

يعرض مكوّن AspectRatio المحتوى ضمن نسبة الأبعاد المطلوبة.

لمزيد من المعلومات، راجع وثائق Base UI.