Skip to content

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
Example usage in your Custom CSS
root {
aspect-ratio: var(--o-ratio-golden);

Aspect Ratios

link Aspect Ratios
DescriptionCSS VariableUtility 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