import { AspectRatio } from "@/components/aspect-ratio/aspect-ratio";
export function AspectRatioDemo() {
return (
<div style={{ maxWidth: 450, width: "100%" }}>
<AspectRatioInstallation
Usage
import { AspectRatio } from "@/components/ui/aspect-ratio/aspect-ratio";<AspectRatio ratio={16 / 9}>
<img src="..." alt="Image" />
</AspectRatio>Examples
Square
Use ratio={1} for a square.
import { AspectRatio } from "@/components/aspect-ratio/aspect-ratio";
export function AspectRatioSquare() {
return (
<div style={{ maxWidth: 300, width: "100%" }}>
<AspectRatioPortrait
Use a ratio below 1 for a portrait orientation.
import { AspectRatio } from "@/components/aspect-ratio/aspect-ratio";
export function AspectRatioPortrait() {
return (
<div style={{ maxWidth: 260, width: "100%" }}>
<AspectRatioRTL
To enable right-to-left support, see the RTL guide.
"use client";
import Image from "next/image";
import * as React from "react";
import { useTranslation } from "@/components/language-selector";API Reference
AspectRatio
The AspectRatio component displays content within a desired ratio.