Aspect Ratio

Displays content within a desired ratio.

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

export function AspectRatioDemo() {
  return (
    <AspectRatio class="rounded-lg bg-muted" ratio={16 / 9}>
      <img
        alt="By Drew Beamer"
        class="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
      />
    </AspectRatio>
  )
}

Installation

npx solidui-cli@latest add aspect-ratio

pnpx solidui-cli@latest add aspect-ratio

yarn dlx solidui-cli@latest add aspect-ratio

bunx --bun solidui-cli@latest add aspect-ratio

dpx solidui-cli@latest add aspect-ratio

Copy and paste the following code into your project.

components/ui/aspect-ratio.tsx

import type { Component, ComponentProps } from "solid-js"
import { mergeProps, splitProps } from "solid-js"

type AspectRatioProps = ComponentProps<"div"> & { ratio?: number }

const AspectRatio: Component<AspectRatioProps> = (rawProps) => {
  const props = mergeProps({ ratio: 1 / 1 }, rawProps)
  const [local, others] = splitProps(props, ["ratio"])
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        "padding-bottom": `${100 / local.ratio}%`
      }}
    >
      <div
        style={{
          position: "absolute",
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        }}
        {...others}
      />
    </div>
  )
}

export { AspectRatio }

Update the import paths to match your project setup.

Usage

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

1
<AspectRatio ratio={16 / 9}>
2
  <img src="..." alt="Image" className="rounded-md object-cover" />
3
</AspectRatio>

Alert Avatar