---
title: "Aspect ratio"
description: "Extra ratios: aspect-video, aspect-square, aspect-golden-ratio and the 1.618 pair."
requested_language: cs
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/cs/next/styling/aspect-ratio
version: unreleased (main)
docs_index: https://docs.systhema.app/cs/next/llms.txt
---
> This page isn't translated yet. Showing English.


Systhema adds named ratios to Tailwind's `aspect-*` scale, so media and placeholder boxes keep their shape at every width: `aspect-square` (1/1), `aspect-video` (16/9), `aspect-golden-ratio` (1.618/1), and the golden pair `aspect-1.618/1` (landscape) and `aspect-1/1.618` (portrait).

## Quick reference

<!-- generated:utilities aspect-ratios -->

| Class                 | Styles                   |
| --------------------- | ------------------------ |
| `aspect-1.618/1`      | `aspect-ratio: 1.618/1;` |
| `aspect-1/1.618`      | `aspect-ratio: 1/1.618;` |
| `aspect-golden-ratio` | `aspect-ratio: 1.618/1;` |
| `aspect-square`       | `aspect-ratio: 1/1;`     |
| `aspect-video`        | `aspect-ratio: 16/9;`    |

<!-- /generated -->

Tailwind's own fraction syntax still works next to these: `aspect-3/2`, `aspect-4/5`, `aspect-21/9` need no configuration.

## Basic usage

Put the class on the element whose shape you want to fix, and let the media fill it with `object-cover`:

```tsx preview title="Named ratios"
export default function Demo() {
  return (
    <div className="grid w-full grid-cols-3 items-start gap-4">
      <figure className="flex flex-col gap-2">
        <img
          src="/demo-assets/abstract-square.webp"
          alt=""
          className="aspect-square w-full rounded-lg object-cover"
        />
        <figcaption className="text-small color-label">aspect-square</figcaption>
      </figure>
      <figure className="flex flex-col gap-2">
        <img
          src="/demo-assets/coast.webp"
          alt=""
          className="aspect-video w-full rounded-lg object-cover"
        />
        <figcaption className="text-small color-label">aspect-video</figcaption>
      </figure>
      <figure className="flex flex-col gap-2">
        <img
          src="/demo-assets/mountains.webp"
          alt=""
          className="aspect-golden-ratio w-full rounded-lg object-cover"
        />
        <figcaption className="text-small color-label">aspect-golden-ratio</figcaption>
      </figure>
    </div>
  )
}
```

The golden pair gives a landscape and a portrait box from one proportion, which keeps a mixed row of media visually related:

```tsx preview title="The golden pair"
export default function Demo() {
  return (
    <div className="flex w-full items-end justify-center gap-4">
      <img
        src="/demo-assets/workspace.webp"
        alt=""
        className="aspect-1.618/1 w-2/3 rounded-lg object-cover"
      />
      <img
        src="/demo-assets/forest-portrait.webp"
        alt=""
        className="aspect-1/1.618 w-1/4 rounded-lg object-cover"
      />
    </div>
  )
}
```

### With `Image` and `Video`

The [`Image`](https://docs.systhema.app/cs/next/components/image.md) and [`Video`](https://docs.systhema.app/cs/next/components/video.md) components take the ratio as a prop instead of a class. `aspectRatio` accepts the `AspectRatio` values from the [generated types](https://docs.systhema.app/cs/next/reference/generated-types.md) (`'16/9'`, `'1/1'`, `'1.618/1'`, `'1/1.618'` and the rest), plus `'21/9-md'`, which is 4/3 on small screens and 21/9 from `md` up.

```tsx preview title="aspectRatio prop"
import { Image } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="w-full max-w-[28rem]">
      <Image
        src="/demo-assets/coast.webp"
        alt="A coastline at low tide"
        width={1800}
        height={1200}
        aspectRatio="1.618/1"
        className="rounded-lg"
      />
    </div>
  )
}
```

## Responsive and state variants

Prefix a ratio with a breakpoint to change it as the viewport grows. Switch the preview's viewport to see the box go from square on a phone to 16/9 on a tablet and golden on a desktop:

```tsx preview iframe height=520 title="Responsive ratio"
export default function Demo() {
  return (
    <div className="flex w-full flex-col gap-3">
      <img
        src="/demo-assets/mountains.webp"
        alt=""
        className="aspect-square w-full rounded-lg object-cover md:aspect-video lg:aspect-golden-ratio"
      />
      <p className="text-small color-label">
        <span className="hidden mm-sm:inline">aspect-square (below md)</span>
        <span className="hidden mm-md:inline">md:aspect-video</span>
        <span className="hidden lg:inline">lg:aspect-golden-ratio</span>
      </p>
    </div>
  )
}
```

```html
<img class="aspect-square md:aspect-video lg:aspect-golden-ratio object-cover" src="…" alt="" />
```

The [range variants](https://docs.systhema.app/cs/next/styling/breakpoints.md#range-variants) work too: `mm-md:aspect-video` applies the ratio between `md` and `lg` only.

## Customizing

For a one-off ratio, use a fraction (`aspect-3/2`) or an arbitrary value (`aspect-[1.85/1]`). To give a ratio a name across the project, add it to the Tailwind theme in your stylesheet; the `--aspect-*` namespace becomes an `aspect-*` class:

```css title="src/app/(site)/globals.css"
@theme {
  --aspect-portrait: 3 / 4;
}
```

`aspect-portrait` then sits beside the Systhema ratios. The named ratios themselves are part of Systhema's Tailwind config, not of your tokens, so they are the same in every project.

## Related

- [Image](https://docs.systhema.app/cs/next/components/image.md)
- [Video](https://docs.systhema.app/cs/next/components/video.md)
- [Generated types](https://docs.systhema.app/cs/next/reference/generated-types.md)
- [Aspect ratio utilities reference](https://docs.systhema.app/cs/next/reference/utilities/aspect-ratios.md)