Zaidan

Command Palette

Search for a command to run...

GitHub

Aspect Ratio

Displays content within a desired ratio.

Installation

CLI

Manual

Copy and paste the following code into your project.

import type { ComponentProps, JSX } from "solid-js";
import { splitProps } from "solid-js";


import { cn } from "~/lib/utils";


type AspectRatioProps = ComponentProps<"div"> & {
  ratio: number;
  class?: string | undefined;
};


const AspectRatio = (props: AspectRatioProps) => {
  const [local, others] = splitProps(props, ["class", "ratio"]);


  return (
    <div
      data-slot="aspect-ratio"
      style={
        {
          "--ratio": local.ratio,
        } as JSX.CSSProperties
      }
      class={cn("relative aspect-(--ratio) overflow-hidden", local.class)}
      {...others}
    />
  );
};


export { AspectRatio };
export type { AspectRatioProps };

Examples

Here are the source code of all the examples from the preview page:

16 / 9

import { AspectRatio } from "~/components/ui/aspect-ratio";
function AspectRatio16x9() {
  return (
    <Example title="16:9" class="items-center justify-center">
      <AspectRatio ratio={16 / 9} class="w-full rounded-lg bg-muted">
        <img
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          class="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
      </AspectRatio>
    </Example>
  );
}

1 / 1

import { AspectRatio } from "~/components/ui/aspect-ratio";
function AspectRatio1x1() {
  return (
    <Example title="1:1" class="items-start">
      <AspectRatio ratio={1 / 1} class="w-full rounded-lg bg-muted">
        <img
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          class="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
      </AspectRatio>
    </Example>
  );
}

9 / 16

import { AspectRatio } from "~/components/ui/aspect-ratio";
function AspectRatio9x16() {
  return (
    <Example title="9:16" class="items-center justify-center">
      <AspectRatio ratio={9 / 16} class="w-full rounded-lg bg-muted">
        <img
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          class="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
      </AspectRatio>
    </Example>
  );
}

21 / 9

import { AspectRatio } from "~/components/ui/aspect-ratio";
function AspectRatio21x9() {
  return (
    <Example title="21:9" class="items-center justify-center">
      <AspectRatio ratio={21 / 9} class="w-full rounded-lg bg-muted">
        <img
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          class="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
      </AspectRatio>
    </Example>
  );
}
PreviewDocs