纵横比

Copy

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

View Code

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add aspect-ratio
Copy

用法

🌐 Usage

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

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

示例

🌐 Examples

正方形

🌐 Square

使用 ratio={1 / 1} 属性的正方形纵横比组件。这对于以正方形格式显示图片非常有用。

🌐 A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.

Copy

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

View Code

肖像

🌐 Portrait

使用 ratio={9 / 16} 属性的纵向纵横比组件。这对于以纵向格式显示图片非常有用。

🌐 A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.

Copy

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

View Code

从右到左

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

Arabic (العربية)Toggle

Copy

"use client"

import * as React from "react"

View Code

API参考

🌐 API Reference

AspectRatio

AspectRatio 组件在所需比例内显示内容。

🌐 The AspectRatio component displays content within a desired ratio.

欲了解更多信息，请参阅 Base UI 文档。

🌐 For more information, see the Base UI documentation.