Aspect Ratio

Show code

Usage

<div class="aspect-ratio" style="--ratio: 16 / 9">
  <img src="…" alt="" />
</div>

The ratio is a custom property rather than a class, so any ratio works without a class for each one. The child fills the box and is cropped to it.

Ratios

Show code

RTL

Set dir="rtl" on the page or on any subtree — padding, corners and positions follow the reading direction on their own. See the button page for a live example.

Accessibility

Cropping is a decision about content: a 16 / 9 box cuts the top and bottom from a portrait photo. Where the subject matters, set object-position rather than accepting the centre.

A decorative image still needs alt="", so it is skipped rather than announced by its file name.