111k
新建

Aspect Ratio

PreviousNext

在所需比例内显示内容。

Radix UIBase UI
Photo
import Image from "next/image"
import { AspectRatio } from "@/components/ui/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} 属性的正方形比例组件。适合以正方形格式展示图片。

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

竖版

使用 ratio={9 / 16} 属性的竖版比例组件。适合以竖版格式展示图片。

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

RTL

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

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

import * as React from "react"

API 参考

AspectRatio

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

PropTypeDefaultRequired
rationumber-Yes
classNamestring-No

更多信息请参见 Base UI 文档。