Aspect Ratio

Set the aspect ratio of an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

ar-auto
aspect-ratio: auto;
ar-1/1
aspect-ratio: 1;
ar-1/2
aspect-ratio: 1 / 2;
ar-2/1
aspect-ratio: 2;
ar-2/3
aspect-ratio: 2 / 3;
ar-3/2
aspect-ratio: 3 / 2;
ar-3/4
aspect-ratio: 3 / 4;
ar-4/3
aspect-ratio: 4 / 3;
ar-4/5
aspect-ratio: 4 / 5;
ar-5/4
aspect-ratio: 5 / 4;
ar-5/7
aspect-ratio: 5 / 7;
ar-7/5
aspect-ratio: 7 / 5;
ar-9/16
aspect-ratio: 9 / 16;
ar-16/9
aspect-ratio: 16 / 9;
ar-21/9
aspect-ratio: 21 / 9;
ar-9/21
aspect-ratio: 9 / 21;

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.