Skip to content
WebTricks

Aspect-ratio box

Keep an element at a fixed width-to-height ratio with the aspect-ratio property.

  • aspect-ratio
  • responsive
  • layout
  • video
Width ratio16
Height ratio9
HTML 
<div class="ratio-box">aspect-ratio</div>
CSS 
:root {
    --w: 16;
    --h: 9;
}

.ratio-box {
    width: 100%;
    max-width: 320px;
    aspect-ratio: var(--w) / var(--h);
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #6b46ff, #00b8d4);
    color: #fff;
    font-weight: 700;
}

How it works

The aspect-ratio property locks an element’s height to its width at the ratio you give it — so a box stays 16 / 9 (or whatever you set) at any width, with no padding hacks.

  • Set just the width (here 100% up to a max-width); the height follows automatically from aspect-ratio.
  • Perfect for responsive video embeds, image placeholders, cards and map tiles.

Before aspect-ratio, this needed the “padding-bottom percentage” trick on a wrapper. Now it’s one line — supported in all modern browsers.