En-boy oranı

Görüntüleri, gömülü videoları ve haritaları boyutlandırılırken sabit bir en-boy oranına göre sınırlar — neobrütalist kartların ızgara içinde kalmasını sağlayan mizanpaj aracı.

import Image from "next/image"

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

En-boy oranı bileşeni, alt öğelerini sabit bir genişlik-yükseklik oranına kilitler — 16:9, kare, dikey — böylece medya sayfanın akışını bozmak yerine kapsayıcısıyla birlikte ölçeklenir. Bu varyant, CSS aspect-ratio özelliği üzerine kurulmuş bağımlılıksız bir sarmalayıcıdır (Base UI'da en-boy oranı primitifi yoktur) ve bilinçli olarak stilsiz bırakılmıştır: neobrütalist kenarlıklar ve gölgeler, onu içine yerleştirdiğiniz karttan gelir.

Şu durumlarda tercih edin:

Görsel ızgaraları ve küçük resimler — farklı boyutlardaki kaynakları tek tip kartlara dönüştürün.
Video ve harita yerleştirmeleri — 16:9'luk alanı önceden ayırın; iframe yüklenirken düzen hiç kaymaz.
Duyarlı hero medyası — yükseklikleri sabit kodlamadan görselleri sütun genişliğiyle birlikte ölçekleyin.

Kurulum


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

Şu bağımlılıkları kurun:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Aşağıdaki kodu kopyalayıp projenize yapıştırın.

components/ui/aspect-ratio.tsx

"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 yollarını projenizin yapısına uyacak şekilde güncelleyin.

Kullanım

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

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

Örnekler

Kare

ratio={1 / 1} prop'unu kullanan, kare oranlı bir bileşen. Görselleri kare formatında göstermek için kullanışlıdır.

import Image from "next/image"

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

Dikey

ratio={9 / 16} prop'unu kullanan, dikey oranlı bir bileşen. Görselleri dikey formatta göstermek için kullanışlıdır.

import Image from "next/image"

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

RTL

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik

AspectRatio düz bir div işler — tamamen sunumsaldır; işin içinde herhangi bir rol veya ARIA özniteliği yoktur. Erişilebilirlik, içine koyduğunuz içeriğin sorumluluğudur: görsellere anlamlı bir alt metni verin (dekoratifse alt=""), gömülü iframe'lere ise bir title ekleyin. Yaygın kullanım object-cover ile kırptığı için, kırpılan kenarları bilgi taşıyan görsellerden kaçının.

API Referansı

AspectRatio

AspectRatio bileşeni, içeriği istenen oranda gösterir.

Prop	Type	Default	Required
`ratio`	`number`	-	Evet
`className`	`string`	-	Hayır

Daha fazla bilgi için Base UI dokümanlarına bakın.