アスペクト比

import Image from "next/image"

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

Aspect Ratio は子要素を固定の幅対高さ比（16:9、正方形、縦長など）にロックし、メディアがコンテナに合わせて拡大縮小され、ページのリフローを防ぎます。このバリアントは CSS の aspect-ratio プロパティ上の依存なしラッパーです（Base UI には aspect-ratio プリミティブがありません）。意図的にスタイルされておらず、ネオブルータリストの枠線や影は、これを入れるカード側から来ます。

次のような場面で使います：

• 画像グリッドとサムネイル — 元サイズがまちまちな素材を均一なカードに揃えます。
• 動画や地図の埋め込み — 16:9 の枠を確保し、iframe の読み込み中にレイアウトがずれないようにします。
• レスポンシブなヒーローメディア — 高さを固定せず、列幅に合わせてアートワークを拡大縮小します。

インストール#

pnpmnpmyarnbun
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
コピー

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
コピー

"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 { AspectRatio } from "@/components/ui/aspect-ratio"

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

使用例#

正方形#

ratio={1 / 1} プロパティを使った正方形のアスペクト比コンポーネントです。画像を正方形で表示するのに便利です。

import Image from "next/image"

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

縦長#

ratio={9 / 16} プロパティを使った縦長のアスペクト比コンポーネントです。画像を縦長で表示するのに便利です。

import Image from "next/image"

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

RTL#

Neobrutalism で RTL を有効にする方法は、RTL 設定ガイドをご覧ください。

"use client"

import * as React from "react"

アクセシビリティ#

AspectRatio はプレーンな div を描画します。見た目のための要素で、role や ARIA 属性は関与しません。アクセシビリティは中身にあります。画像には意味のある alt テキストを付け（装飾なら alt=""）、埋め込み iframe には title を付けてください。通常は object-cover で切り抜くため、切り取られる端に重要な情報が載っている画像は避けてください。

APIリファレンス#

AspectRatio#

AspectRatio コンポーネントは、指定した比率でコンテンツを表示します。

詳しくは、Base UI のドキュメントをご覧ください。