نسبت تصویر

import Image from "next/image"

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

Aspect ratio فرزندانش را به نسبت ثابت عرض‌به‌ارتفاع قفل می‌کند — 16:9، مربع، portrait — تا رسانه با کانتینر مقیاس شود نه این‌که صفحه را reflow کند. این variant یک wrapper بدون‌وابستگی روی ویژگی CSSِ aspect-ratio است (Base UI primitive برای aspect-ratio ندارد) و عمداً بدون استایل است: حاشیه‌ها و سایه‌های نئوبروتالیستی از کارتی می‌آیند که آن را داخلش می‌گذارید.

برای این موارد از آن استفاده کنید:

• شبکه‌های تصویر و thumbnail — ابعاد مختلط منابع را به کارت‌های یکنواخت تبدیل کنید.
• جاسازی ویدئو و نقشه — یک اسلات 16:9 رزرو کنید تا iframe هنگام بارگذاری layout را جابه‌جا نکند.
• رسانهٔ hero واکنش‌گرا — اثر هنری را با عرض ستون مقیاس کنید بدون ارتفاع ثابت.

نصب#

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 ساده رندر می‌کند — کاملاً presentational، بدون role یا ویژگی ARIA. دسترسی‌پذیری با محتوای داخل آن است: به تصاویر alt معنادار بدهید (یا وقتی تزئینی‌اند alt="") و به iframeهای جاسازی‌شده title. چون الگوی معمول با object-cover برش می‌دهد، از تصاویری که اطلاعات مهمشان در لبه‌های بریده‌شده است پرهیز کنید.

مرجع API#

AspectRatio#

کامپوننت AspectRatio محتوا را در نسبت دلخواه نمایش می‌دهد.

برای اطلاعات بیشتر، مستندات Base UI را ببینید.