Skip to content

Aspect Ratio

Holds media at a fixed shape so the page doesn't jump as it loads.

Sourcecomponents/aspect-ratio.tsx

16 / 9

Abstract hills at dusk

1 / 1

Portrait placeholder

Usage

Aspect Ratio usage
import { AspectRatio } from "@/components/aspect-ratio";
export function AspectRatioUsage({ src }: { src: string }) {  return (    <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md">      {/* eslint-disable-next-line @next/next/no-img-element */}      <img src={src} alt="The checkout page on a phone" className="size-full object-cover" />    </AspectRatio>  );}

When to use

Use when

Images and video at a fixed shape so the page doesn't jump

Don’t use when

Text content