Rasio aspek

Membatasi gambar, video yang disematkan, dan peta agar tetap pada rasio tetap saat ukurannya disesuaikan — utilitas tata letak yang memastikan kartu bergaya neobrutalis tetap sejajar dengan kisi.

import Image from "next/image"

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

Aspect ratio mengunci elemen anaknya pada rasio lebar-tinggi yang tetap — 16:9, persegi, potret — sehingga media menskala mengikuti kontainernya alih-alih mengubah alur halaman. Varian ini adalah pembungkus tanpa dependensi di atas properti CSS aspect-ratio (Base UI tidak memiliki primitif aspect-ratio) dan memang sengaja tanpa gaya: garis tepi dan bayangan neobrutalisnya berasal dari kartu tempat Anda meletakkannya.

Gunakan saat:

Grid gambar dan thumbnail — menyeragamkan dimensi sumber yang campur aduk menjadi kartu-kartu yang seragam.
Embed video dan peta — mencadangkan slot 16:9 agar iframe tidak menggeser tata letak selagi dimuat.
Media hero responsif — menskalakan karya visual mengikuti lebar kolom tanpa menetapkan tinggi secara kaku.

Instalasi


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

Pasang dependensi berikut:


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

Salin dan tempel kode berikut ke proyek Anda.

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 }

Perbarui jalur import agar sesuai dengan struktur proyek Anda.

Penggunaan

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

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

Contoh

Persegi

Komponen dengan rasio persegi melalui prop ratio={1 / 1}. Ini berguna untuk menampilkan gambar dalam format persegi.

import Image from "next/image"

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

Potret

Komponen dengan rasio potret melalui prop ratio={9 / 16}. Ini berguna untuk menampilkan gambar dalam format potret.

import Image from "next/image"

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

RTL

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import * as React from "react"

Aksesibilitas

AspectRatio merender div polos — murni presentasional, tanpa role maupun atribut ARIA. Aksesibilitasnya ada pada konten di dalamnya: beri gambar teks alt yang bermakna (atau alt="" bila dekoratif) dan beri title pada iframe yang disematkan. Karena pola yang umum memangkas gambar dengan object-cover, hindari gambar yang tepi terpangkasnya memuat informasi.

Referensi API

AspectRatio

Komponen AspectRatio menampilkan konten dalam rasio yang diinginkan.

Prop	Type	Default	Required
`ratio`	`number`	-	Ya
`className`	`string`	-	Tidak

Untuk informasi lebih lanjut, lihat dokumentasi Base UI.