← All Examples

Aspect Ratio Box

Maintain a fixed aspect ratio on any element using the aspect-ratio property.

Published May 19, 2026

Demo

16 / 9
1 / 1
4 / 3

HTML

<div class="box-16-9">16:9 video</div>
<div class="box-square">Square</div>
<div class="box-4-3">4:3 image</div>

CSS

/* Set width, height is auto-calculated */
.box-16-9 {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.box-square {
  aspect-ratio: 1 / 1;
  width: 200px;
}

.box-4-3 {
  aspect-ratio: 4 / 3;
  width: 300px;
}

How it works

The aspect-ratio property makes an element maintain a width-to-height ratio automatically. Set a width (fixed, percentage, or auto) and the height adjusts to match the ratio. This replaces the old padding-top hack (padding-top:56.25% for 16:9) with a clean, readable one-liner.