> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Aspect Ratio

> Keep media frames consistent with the bundled aspect-ratio utilities.

export const AspectRatioDemo = () => {
  const ratios = [{
    cls: "aspect-square",
    ratio: "1/1"
  }, {
    cls: "aspect-video",
    ratio: "16/9"
  }, {
    cls: "aspect-auto (4/3)",
    ratio: "4/3"
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-3 gap-6">
          {ratios.map(r => <div key={r.cls}>
              <span className="tw-label">{r.cls}</span>
              <div style={{
    aspectRatio: r.ratio
  }} className="rounded-lg overflow-hidden">
                <div style={{
    width: "100%",
    height: "100%",
    background: "linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #f97316 100%)"
  }} />
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

Use aspect ratio utilities when the shape of the frame matters more than the media inside it. The framework ships **`aspect-square`**, **`aspect-video`**, and **`aspect-auto`** (reset), with responsive **`--on-*`** variants where structural utilities support them.

| Class            | Ratio | CSS                     | Usage                                                        |
| ---------------- | ----- | ----------------------- | ------------------------------------------------------------ |
| `.aspect-square` | 1:1   | `aspect-ratio: 1 / 1;`  | Square frames                                                |
| `.aspect-video`  | 16:9  | `aspect-ratio: 16 / 9;` | Video and hero media                                         |
| `.aspect-auto`   | —     | `aspect-ratio: auto;`   | Remove a fixed ratio; use intrinsic or content-driven sizing |

## Example

<AspectRatioDemo />

## Best Practices

<Steps>
  <Step title="Set Width, Then Ratio">
    Aspect ratio controls shape, but width still determines the overall size.
  </Step>

  <Step title="Pair With Object Fit">
    Use `.object-cover` or `.object-contain` to decide how media behaves inside the frame.
  </Step>

  <Step title="Use Square for Repeating Media">
    Avatars, product tiles, and thumbnail systems often benefit from `aspect-square`.
  </Step>

  <Step title="Use Video for Editorial Surfaces">
    `aspect-video` works well for hero media, embeds, and featured content.
  </Step>
</Steps>

## Related Utilities

<CardGroup cols={2}>
  <Card title="Object Fit" icon="object-intersect" href="/layout/object-fit">
    Control how images fit in containers
  </Card>

  <Card title="Overflow" icon="cube" href="/layout/overflow">
    Control clipping and scrolling
  </Card>
</CardGroup>