Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# AspectRatio

Container that maintains a specific aspect ratio for its content

## Example​

    import { AspectRatio } from "@databricks/appkit-ui/react"

    export default function AspectRatioExample() {
      return (
        <AspectRatio ratio={16 / 9} className="bg-muted">
          <img
            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
            alt="Photo by Drew Beamer"
            className="h-full w-full rounded-md object-cover"
          />
        </AspectRatio>
      )
    }

## AspectRatio​

Container that maintains a specific aspect ratio for its content

Source: `packages/appkit-ui/src/react/ui/aspect-ratio.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`ratio` | `number` |  | - | -
`asChild` | `boolean` |  | - | -

### Usage​

    import { AspectRatio } from '@databricks/appkit-ui';

    <AspectRatio /* props */ />