Aspect Ratio

コンテンツを希望の比率で表示します。

import Image from "next/image"

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

インストール


pnpm dlx shadcn@latest add aspect-ratio

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/aria/aspect-ratio"

ratio={9 / 16} プロップを使用した縦長のアスペクト比コンポーネント。これは、画像を縦長形式で表示する場合に便利です。

import Image from "next/image"

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

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

منظر طبيعي جميل

"use client"

import * as React from "react"

AspectRatio コンポーネントは、希望の比率でコンテンツを表示します。

プロップ	タイプ	デフォルト	必須
`ratio`	`number`	-	はい
`className`	`string`	-	いいえ

On This Page

shadcn/uiアプリをVercelにデプロイ

OpenAI、Sonos、Adobeなどに採用されています。

Vercelは、アプリや機能を大規模にデプロイするためのツールとインフラを提供します。