Aspect Ratios CheatSheet

This page lists all Aspect Ratio CSS custom properties and utility classes available in the OxyProps Framework

Target CSS properties

link Target CSS properties

• aspect-ratio

bricks

Example usage in your Custom CSS

root {
  aspect-ratio: var(--o-ratio-golden);
}

oxygen

Example usage in your Custom CSS

  aspect-ratio: var(--o-ratio-golden);

Aspect Ratios

link Aspect Ratios

Description	CSS Variable	Utility Class
Golden aspect ratio of 1.618:1.	--o-ratio-golden	o-golden
Landscape aspect ratio of 4:3.	--o-ratio-landscape	o-landscape
Portrait aspect ratio of 3:4.	--o-ratio-portrait	o-portrait
Square aspect ratio of 1:1.	--o-ratio-square	o-square
Ultrawide aspect ratio of 18:5.	--o-ratio-ultrawide	o-ultrawide
Widescreen aspect ratio of 16:9.	--o-ratio-widescreen	o-widescreen