Aspect Ratios

Square

link Square

Applies an aspect ratio of 1:1 to an element.

square

CSS Variable

var(--o-ratio-square)

Utility Class

o-square

Landscape

link Landscape

Applies an aspect ratio of 4:3 to an element.

landscape

CSS Variable

var(--o-ratio-landscape)

Utility Class

o-landscape

Portrait

link Portrait

Applies an aspect ratio of 3:4 to an element.

portrait

CSS Variable

var(--o-ratio-portrait)

Utility Class

o-portrait

Widescreen

link Widescreen

Applies an aspect ratio of 16:9 to an element.

widescreen

CSS Variable

var(--o-ratio-widescreen)

Utility Class

o-widescreen

Ultrawide

link Ultrawide

Applies an aspect ratio of 18:5 to an element.

ultrawide

CSS Variable

var(--o-ratio-ultrawide)

Utility Class

o-ultrawide

Golden

link Golden

Applies an aspect ratio of 1.618:1 to an element.

golden

CSS Variable

var(--o-ratio-golden)

Utility Class

o-golden