Aspect Ratio

Constrains content to a fixed width-to-height ratio, e.g. 16:9 media.

layout

Installation

npx cano-ui add aspect-ratio

Source

import * as React from "react"

import { cn } from "@/lib/utils"

export interface AspectRatioProps extends React.ComponentProps<"div"> {
  /** Width / height, e.g. 16 / 9. Defaults to 1. */
  ratio?: number
}

/** Constrains its content to a given width-to-height ratio. */
function AspectRatio({
  ratio = 1,
  className,
  style,
  ...props
}: AspectRatioProps) {
  return (
    <div
      data-slot="aspect-ratio"
      style={{ aspectRatio: ratio, ...style }}
      className={cn("relative w-full", className)}
      {...props}
    />
  )
}

export { AspectRatio }

This exact file lands in your project at components/ui/aspect-ratio.tsx. It is yours to edit.