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;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:ar-(value)
Small≥640px
md:ar-(value)
Medium≥768px
lg:ar-(value)
Large≥1024px
xxl:ar-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:ar-(value)