# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/aspect-ratio.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { UsingACustomValue, ResponsiveDesign, CustomizingYourTheme } from "@/components/content.tsx";

export const title = "aspect-ratio";
export const description = "Utilities for controlling the aspect ratio of an element.";

<ApiTable
  rows={[
    ["aspect-<ratio>", "aspect-ratio: <ratio>;"],
    ["aspect-square", "aspect-ratio: 1 / 1;"],
    ["aspect-video", "aspect-ratio: var(--aspect-video); /* 16 / 9 */"],
    ["aspect-auto", "aspect-ratio: auto;"],
    ["aspect-(<custom-property>)", "aspect-ratio: var(<custom-property>);"],
    ["aspect-[<value>]", "aspect-ratio: <value>;"],
  ]}
/>

## Examples

### Basic example

Use <code>aspect-<var>&lt;ratio&gt;</var></code> utilities like `aspect-3/2` to give an element a specific aspect ratio:

<Figure desktopHint="Resize the example to see the expected behavior">

<Example resizable>
  {
    <img
      className="mx-auto aspect-3/2 w-full max-w-sm rounded-lg object-cover"
      src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"
    />
  }
</Example>

```html
<!-- [!code classes:aspect-3/2] -->
<img class="aspect-3/2 object-cover ..." src="/img/villas.jpg" />
```

</Figure>

### Using a video aspect ratio

Use the `aspect-video` utility to give a video element a 16 / 9 aspect ratio:

<Figure desktopHint="Resize the example to see the expected behavior">

<Example resizable>
  {
    <iframe
      className="aspect-video w-full rounded-lg"
      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowFullScreen
    ></iframe>
  }
</Example>

```html
<!-- [!code classes:aspect-video] -->
<iframe class="aspect-video ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
```

</Figure>

### Using a custom value

<UsingACustomValue
  element="img"
  elementAttributes={{ src: "/img/villas.jpg" }}
  utility="aspect"
  name="aspect ratio"
  value="calc(4*3+1)/3"
  variable="aspect-ratio"
/>

### Responsive design

<ResponsiveDesign
  element="iframe"
  elementAttributes={{ src: "https://www.youtube.com/embed/dQw4w9WgXcQ" }}
  property="aspect-ratio"
  defaultClass="aspect-video"
  featuredClass="aspect-square"
/>

## Customizing your theme

<CustomizingYourTheme
  element="iframe"
  elementAttributes={{ src: "https://www.youtube.com/embed/dQw4w9WgXcQ" }}
  utility="aspect"
  name="aspect ratio"
  customName="retro"
  customValue="4 / 3"
/>