Beeldverhouding

Zorgt ervoor dat afbeeldingen, ingesloten video’s en kaarten bij het vergroten of verkleinen een vaste verhouding behouden — de lay-outfunctie die ervoor zorgt dat neobrutalistische kaarten binnen het raster blijven.

import Image from "next/image"

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

Aspect ratio vergrendelt zijn children op een vaste verhouding tussen breedte en hoogte — 16:9, vierkant, staand — zodat media meeschalen met hun container in plaats van de pagina te laten verspringen. Deze variant is een dependency-vrije wrapper om de CSS-eigenschap aspect-ratio (Base UI heeft geen aspect-ratio-primitive) en bewust zonder styling: de neobrutalistische randen en schaduwen komen van de card waarin je de component plaatst.

Gebruik deze component bij:

Afbeeldingsrasters en thumbnails — normaliseer wisselende bronafmetingen tot uniforme cards.
Video- en kaart-embeds — reserveer een 16:9-vak zodat de iframe de lay-out nooit verschuift tijdens het laden.
Responsieve hero-media — laat beeldmateriaal meeschalen met de kolombreedte zonder hoogtes te hardcoden.

Installatie


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

Installeer de volgende afhankelijkheden:


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

Kopieer en plak de volgende code in je project.

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 }

Werk de import-paden bij zodat ze overeenkomen met je projectstructuur.

Gebruik

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

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

Voorbeelden

Vierkant

Een component met een vierkante verhouding via de prop ratio={1 / 1}. Dit is handig om afbeeldingen in een vierkant formaat te tonen.

import Image from "next/image"

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

Staand

Een component met een staande verhouding via de prop ratio={9 / 16}. Dit is handig om afbeeldingen in een staand formaat te tonen.

import Image from "next/image"

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

RTL

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Toegankelijkheid

AspectRatio rendert een kale div — puur presentationeel, zonder rol of ARIA-attributen. De toegankelijkheid zit in de inhoud erbinnen: geef afbeeldingen betekenisvolle alt-tekst (of alt="" wanneer ze decoratief zijn) en ingesloten iframes een title. Omdat het gebruikelijke patroon bijsnijdt met object-cover, kun je afbeeldingen beter vermijden waarvan de afgesneden randen informatie bevatten.

API-referentie

AspectRatio

De component AspectRatio toont inhoud in de gewenste verhouding.

Prop	Type	Default	Required
`ratio`	`number`	-	Ja
`className`	`string`	-	Nee

Voor meer informatie, zie de Base UI-documentatie.