Shadcn
Aspect Ratio 固定比例
让媒体或容器保持指定宽高比。
Preview
import Image from "next/image"
import { AspectRatio } from "@scopify/ui/shadcn/components/aspect-ratio"
export default function AspectRatioDemo() {
return (
<div className="w-full max-w-sm">
<AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
<Image
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
fill
className="w-full rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
</div>
)
}
Scopify 说明
本页按 shadcn/ui 官方 Radix UI 组件文档的章节与示例完整整理。示例预览使用 Scopify 当前的 @scopify/ui/shadcn 实现；导入路径、主题 Token 和行为差异以本仓库源码为准。
Installation
npx shadcn@latest add aspect-ratioUsage
import { AspectRatio } from "@scopify/ui/shadcn/components/aspect-ratio"<AspectRatio ratio={16 / 9}>
<Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>Square
A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.
Preview
import Image from "next/image"
import { AspectRatio } from "@scopify/ui/shadcn/components/aspect-ratio"
export function AspectRatioSquare() {
return (
<div className="w-full max-w-[12rem]">
<AspectRatio ratio={1 / 1} className="rounded-lg bg-muted">
<Image
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
fill
className="rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
</div>
)
}
Portrait
A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.
Preview
import Image from "next/image"
import { AspectRatio } from "@scopify/ui/shadcn/components/aspect-ratio"
export function AspectRatioPortrait() {
return (
<div className="w-full max-w-[10rem]">
<AspectRatio ratio={9 / 16} className="rounded-lg bg-muted">
<Image
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
fill
className="rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
</div>
)
}
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Preview
"use client"
import * as React from "react"
import Image from "next/image"
import {
useTranslation,
type Translations,
} from "@/components/language-selector"
import { AspectRatio } from "@/styles/radix-nova/ui-rtl/aspect-ratio"
const translations: Translations = {
en: {
dir: "ltr",
values: {
caption: "Beautiful landscape",
},
},
ar: {
dir: "rtl",
values: {
caption: "منظر طبيعي جميل",
},
},
he: {
dir: "rtl",
values: {
caption: "נוף יפה",
},
},
}
export function AspectRatioRtl() {
const { dir, t } = useTranslation(translations, "ar")
return (
<figure className="w-full max-w-sm" dir={dir}>
<AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
<Image
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
fill
className="w-full rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
<figcaption className="mt-2 text-center text-sm text-muted-foreground">
{t.caption}
</figcaption>
</figure>
)
}
API Reference
AspectRatio
The AspectRatio component displays content within a desired ratio.
| Prop | Type | Default | Required |
|---|---|---|---|
ratio | number | - | Yes |
className | string | - | No |
For more information, see the Radix UI documentation.