Docs

This page isn't translated yet

next

Aspect ratio

Extra ratios: aspect-video, aspect-square, aspect-golden-ratio and the 1.618 pair.

On this page

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 referenceLink to this section

ClassStyles
aspect-1.618/1aspect-ratio: 1.618/1;
aspect-1/1.618aspect-ratio: 1/1.618;
aspect-golden-ratioaspect-ratio: 1.618/1;
aspect-squareaspect-ratio: 1/1;
aspect-videoaspect-ratio: 16/9;

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

Basic usageLink to this section

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

Named ratios
aspect-square
aspect-video
aspect-golden-ratio
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:

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 VideoLink to this section

The Image and Video components take the ratio as a prop instead of a class. aspectRatio accepts the AspectRatio values from the generated types ('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.

aspectRatio prop
A coastline at low tide
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 variantsLink to this section

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:

Responsive ratio
Open demo in a new tab
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>
  )
}
<img class="aspect-square md:aspect-video lg:aspect-golden-ratio object-cover" src="…" alt="" />

The range variants work too: mm-md:aspect-video applies the ratio between md and lg only.

CustomizingLink to this section

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:

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.

RelatedLink to this section