CSS aspect-ratio Property

Definition and Usage

The aspect-ratio property sets the preferred width-to-height ratio of a box. Write 16 / 9 and, if the width is known and the height is auto, the browser calculates the height. The ratio is width divided by height.

The initial value is auto. It is not inherited. One side must stay automatic, or the ratio does not change the used size. It applies to elements except inline boxes and internal table or ruby boxes. A ratio can be animated when one side stays automatic.

CSS Syntax

A ratio, the keyword auto, or both. The first number is the width. The second is the height.

Property Values

unset equals initial here, so it is auto. revert is the user-agent value, also auto. A ratio with a 0, such as 1 / 0, is degenerate and behaves as auto. If both width and height are lengths, the ratio does not change the used size.

How to Use aspect-ratio

Give the box one size. Let the ratio calculate the other.

1. Set width, or let the box stretch across its container. Leave height at auto.
2. Set aspect-ratio to width / height, such as 16 / 9 or 1 / 1.
3. If you also set height to a length, the ratio no longer changes the used size. Remove one of the two lengths.
4. On an image, auto 16 / 9 holds that frame until the file's own ratio is known.

Live Preview

The box width stays 10rem. Only the ratio changes, so the height follows. auto lets the text set the height.

CSS Examples

Each box has a width and an automatic height. The line to study is aspect-ratio. Use Try It Yourself for a live editor.

<style>
  div {
    width: 10rem;
    background: #1d4ed8;
    color: #fff;
  }
  .square { aspect-ratio: 1 / 1; }
  .wide { aspect-ratio: 16 / 9; }
</style>

<div class="square">1 / 1</div>
<div class="wide">16 / 9</div>

<style>
  div {
    width: 10rem;
    background: #1d4ed8;
    color: #fff;
  }
  .free { aspect-ratio: 1 / 1; }
  .locked {
    height: 4rem;
    aspect-ratio: 16 / 9;
  }
</style>

<div class="free">1 / 1</div>
<div class="locked">Locked</div>

<style>
  div {
    width: 8rem;
    background: #1d4ed8;
    color: #fff;
  }
  .one { aspect-ratio: 1; }
  .half { aspect-ratio: 0.5; }
</style>

<div class="one">1</div>
<div class="half">0.5</div>

Edge Cases & Pitfalls

Key Takeaways