Seitenverhältnis

Passt Bilder, eingebettete Videos und Karten beim Skalieren an ein festes Seitenverhältnis an – das Layout-Tool, das dafür sorgt, dass die Karten im Neobrutalismus-Stil im Raster bleiben.

import Image from "next/image"

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

Aspect Ratio fixiert seine Kinder auf ein festes Verhältnis von Breite zu Höhe – 16:9, quadratisch, Hochformat –, damit Medien mit ihrem Container skalieren, statt die Seite neu umbrechen zu lassen. Diese Variante ist ein abhängigkeitsfreier Wrapper um die CSS-Eigenschaft aspect-ratio (Base UI hat kein Aspect-Ratio-Primitive) und bleibt bewusst ungestylt: Die neobrutalistischen Rahmen und Schatten kommen von der Karte, in die du es setzt.

Die richtige Wahl für:

Bildraster und Thumbnails – normalisiert gemischte Ausgangsformate zu einheitlichen Karten.
Video- und Karten-Embeds – reserviert einen 16:9-Platz, damit das iframe beim Laden das Layout nicht verschiebt.
Responsive Hero-Medien – skaliert Grafiken mit der Spaltenbreite, ohne Höhen fest zu verdrahten.

Installation


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

Installiere die folgenden Abhängigkeiten:


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

Kopiere den folgenden Code und füge ihn in dein Projekt ein.

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 }

Passe die Import-Pfade an die Struktur deines Projekts an.

Verwendung

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

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

Beispiele

Quadratisch

Eine Komponente mit quadratischem Seitenverhältnis über die Prop ratio={1 / 1}. Das ist nützlich, um Bilder im quadratischen Format anzuzeigen.

import Image from "next/image"

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

Hochformat

Eine Komponente mit Seitenverhältnis im Hochformat über die Prop ratio={9 / 16}. Das ist nützlich, um Bilder im Hochformat anzuzeigen.

import Image from "next/image"

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

RTL

Um die RTL-Unterstützung in Neobrutalism zu aktivieren, siehe die RTL-Konfigurationsanleitung.

"use client"

import * as React from "react"

Barrierefreiheit

AspectRatio rendert ein schlichtes div – rein präsentational, ohne Rolle und ohne ARIA-Attribute. Die Barrierefreiheit steckt im Inhalt darin: Gib Bildern einen aussagekräftigen alt-Text (oder alt="", wenn sie dekorativ sind) und eingebetteten iframes einen title. Da das übliche Muster mit object-cover zuschneidet, vermeide Bilder, deren abgeschnittene Ränder Informationen tragen.

API-Referenz

AspectRatio

Die AspectRatio-Komponente zeigt Inhalt im gewünschten Seitenverhältnis an.

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

Weitere Informationen findest du in der Base-UI-Dokumentation.