Size Ratio
Category: BasicBy controlling the aspect-ratio property, block elements can automatically maintain proportional dimensions based on either width or height, supporting common media sizes.
Basic Usage
The ratio style classes in this framework are implemented by controlling the aspect-ratio CSS property of elements.
There is one prerequisite for using these style classes: the element must have either width or height defined. The other dimension will scale proportionally based on the defined property.
Apply the _ar class to an element with a defined width (or height) to create a perfect square.
- Output
- HTML
-
_ar
-
Common Landscape Ratios
Standard landscape ratios include:
| Class Name | Ratio | Description |
|---|---|---|
_ar-1x1 |
1:1 | Square |
_ar-16x9 |
16:9 | HDTV ratio |
_ar-16x10 |
16:10 | Widescreen laptop ratio |
_ar-4x3 |
4:3 | Traditional TV ratio |
_ar-5x4 |
5:4 | Large format camera ratio |
_ar-3x2 |
3:2 | Tablet computer ratio |
- Output
- HTML
-
_ar-1x1 _ar-16x9 _ar-16x10 _ar-4x3 _ar-5x4 _ar-3x2
-
Additional Landscape Ratios
Several newer landscape ratios are also supported:
| Class Name | Ratio | Description |
|---|---|---|
_ar-2x1 |
2:1 | Wide mobile landscape ratio |
_ar-21x9 |
21:9 | Ultra-wide screen ratio |
_ar-32x9 |
32:9 | 4K ultra-wide screen ratio |
- Output
- HTML
-
_ar-2x1 _ar-32x9 _ar-32x9
-
Portrait Ratios
Built-in portrait ratios include:
| Class Name | Ratio | Description |
|---|---|---|
_ar-2x3 |
2:3 | Poster ratio |
_ar-9x16 |
9:16 | Mobile portrait ratio |
_ar-1x2 |
1:2 | Narrow mobile portrait ratio |
- Output
- HTML
-
_ar-2x3 _ar-9x16 _ar-1x2
-