Docs
アスペクト比

アスペクト比

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

DocsAPI Reference
Photo by Drew Beamer

インストール

npx shadcn-ui@latest add aspect-ratio

使い方

import Image from "next/image"
 
import { AspectRatio } from "@/components/ui/aspect-ratio"
<div className="w-[450px]">
  <AspectRatio ratio={16 / 9}>
    <Image src="..." alt="Image" className="rounded-md object-cover" />
  </AspectRatio>
</div>