Proporcje

Ogranicza obrazy, osadzone filmy i mapy do stałego współczynnika proporcji podczas skalowania — narzędzie do układania, które sprawia, że karty w stylu neobrutalistycznym pozostają w siatce.

import Image from "next/image"

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

Aspect ratio utrzymuje swoje dzieci w stałej proporcji szerokości do wysokości — 16:9, kwadrat, pion — dzięki czemu media skalują się razem z kontenerem, zamiast rozpychać układ strony. Ten wariant to pozbawiona zależności nakładka na właściwość CSS aspect-ratio (Base UI nie ma prymitywu proporcji), celowo pozbawiona stylów: neobrutalistyczne obramowania i cienie pochodzą z karty, w którą ją włożysz.

Sięgnij po ten komponent, gdy:

Siatki obrazów i miniatury — sprowadź różne wymiary źródłowe do jednolitych kart.
Osadzone wideo i mapy — zarezerwuj miejsce 16:9, aby iframe nie przesuwał układu w trakcie ładowania.
Responsywne media hero — skaluj grafikę razem z szerokością kolumny bez sztywno zapisanych wysokości.

Instalacja


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

Zainstaluj następujące zależności:


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

Skopiuj i wklej poniższy kod do swojego projektu.

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 }

Zaktualizuj ścieżki importów, aby pasowały do struktury twojego projektu.

Użycie

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

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

Przykłady

Kwadrat

Komponent o kwadratowych proporcjach dzięki propowi ratio={1 / 1}. Przydaje się do wyświetlania obrazów w formacie kwadratowym.

import Image from "next/image"

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

Pionowy

Komponent o pionowych proporcjach dzięki propowi ratio={9 / 16}. Przydaje się do wyświetlania obrazów w formacie pionowym.

import Image from "next/image"

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

RTL

Aby włączyć obsługę RTL w Neobrutalism, zobacz przewodnik konfiguracji RTL.

"use client"

import * as React from "react"

Dostępność

AspectRatio renderuje zwykły div — czysto prezentacyjny, bez roli i atrybutów ARIA. Dostępność mieszka w treści w środku: nadaj obrazom sensowny tekst alt (albo alt="", gdy są dekoracyjne), a osadzonym elementom iframe — title. Ponieważ typowy wzorzec kadruje przez object-cover, unikaj obrazów, których przycięte krawędzie niosą informację.

Referencja API

AspectRatio

Komponent AspectRatio wyświetla treść w żądanych proporcjach.

Prop	Type	Default	Required
`ratio`	`number`	-	Tak
`className`	`string`	-	Nie

Więcej informacji znajdziesz w dokumentacji Base UI.