---
title: Aspect Ratio
description: Displays content within a desired ratio.
---

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/aspectratio"

templ AspectRatioDemo() {
	@aspectratio.AspectRatio(aspectratio.Props{
		Ratio: "16/9",
		Class: "w-full max-w-sm rounded-lg bg-muted",
	}) {
		<img
			src="/assets/img/aspect_ratio_placeholder.jpeg"
			alt="Photo"
			class="absolute inset-0 h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
		/>
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add aspect-ratio
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="aspect-ratio" title="components/aspectratio/aspectratio.templ" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/aspectratio"
```

```templ showLineNumbers
@aspectratio.AspectRatio(aspectratio.Props{Ratio: "16/9"}) {
	<img src="..." alt="Image" class="absolute inset-0 h-full w-full rounded-md object-cover"/>
}
```

## Square

A square aspect ratio component using the `Ratio: "1/1"` prop. This is useful for displaying images in a square format.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/aspectratio"

templ AspectRatioSquare() {
	@aspectratio.AspectRatio(aspectratio.Props{
		Ratio: "1/1",
		Class: "w-full max-w-[12rem] rounded-lg bg-muted",
	}) {
		<img
			src="/assets/img/aspect_ratio_placeholder.jpeg"
			alt="Photo"
			class="absolute inset-0 h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
		/>
	}
}
```

## Portrait

A portrait aspect ratio component using the `Ratio: "9/16"` prop. This is useful for displaying images in a portrait format.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/aspectratio"

templ AspectRatioPortrait() {
	@aspectratio.AspectRatio(aspectratio.Props{
		Ratio: "9/16",
		Class: "w-full max-w-[10rem] rounded-lg bg-muted",
	}) {
		<img
			src="/assets/img/aspect_ratio_placeholder.jpeg"
			alt="Photo"
			class="absolute inset-0 h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
		/>
	}
}
```

## API Reference

### AspectRatio

The `AspectRatio` component displays content within a desired ratio.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Ratio` | `string` | -       |
| `Class` | `string` | -       |