AspectRatio

Default 16∶9

Prop ratio omitted — 16 / 9 is used.

tsx

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

<AspectRatio class="max-w-md rounded-lg border border-separator-opaque/40">
  <img
    src="https://picsum.photos/seed/aspect1/800/450"
    alt="Sample"
    width={800}
    height={450}
    class="h-full w-full object-cover"
  />
</AspectRatio>

Square

ratio={"{1}"} for a 1∶1 ratio.

tsx

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

<AspectRatio ratio={1} class="max-w-xs rounded-lg border border-separator-opaque/40">
  <img
    src="https://picsum.photos/seed/aspect2/400/400"
    alt="Square"
    width={400}
    height={400}
    class="h-full w-full object-cover"
  />
</AspectRatio>

Custom ratio

Any number = width / height (here a wide canvas 2.39). ```tsx import { AspectRatio } from "~/components/ui/base/aspect-ratio";

tsx

Cinematic ratio 2.39 : 1

Content instead of an image

tsx

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

<AspectRatio ratio={2.39} class="max-w-2xl rounded-lg border border-separator-opaque/40">
  <div class="flex h-full w-full items-center justify-center bg-fill-tertiary/50 text-callout text-secondary-label">
    Content instead of an image
  </div>
</AspectRatio>

Metadata

Source: meta.generated.json (see npm run generate)

File base/aspect-ratio/meta.generated.json not found or path not allowed.