• Logo

    Elementra UI

    v0.1.8 - Documentation
  1. Docs
  3. Components/aspect-ratio/

Aspect Ratio

Displays content within a target ratio (16:9, 4:3, 1:1, 21:9) without layout shifting.

1Installation

npm i elementra-ui

2Add Component CLI

npx elementra-ui add aspect-ratio

3Interactive Preview

Target Ratio Container

ratio = 1.78

Code Usage

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

export default function AspectRatioDemo() {
  return (
    <div className="w-[450px]">
      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg overflow-hidden">
        <img
          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
          alt="Photo by Drew Beamer"
          className="object-cover h-full w-full"
        />
      </AspectRatio>
    </div>
  );
}