125k

Aspect Ratio

PreviousNext

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

BaseRadixReact Aria
写真
import Image from "next/image"

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

縦長

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

写真
import Image from "next/image"

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

RTL

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

Photo
منظر طبيعي جميل
"use client"

import * as React from "react"

API リファレンス

アスペクト比

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

プロップタイプデフォルト必須
rationumber-はい
classNamestring-いいえ

Base UI のドキュメントで詳細を確認できます。