Ratios
Apply a width/height ratio to intrinsically size a element. Generally used to provide "layout" to images.
- 1:1
- 16:9
- 3:1
Available Classes
All the available ratio classes to use currently, if there is a ratio you need create a branch and add as necessary.
| Available Ratios | HTML Class |
|---|---|
| 1x1 | ratio--1x1 |
| 2x1 | ratio--2x1 |
| 3x1 | ratio--3x1 |
| 3x2 | ratio--3x2 |
| 4x1 | ratio--4x3 |
| 4x3 | ratio--4x3 |
| 5x4 | ratio--5x4 |
| 8x5 | ratio--16x9 |
Examples
Some practical examples of ratio object in effect, providing intrinsic layout to images and other media.
Useful notes and reading:
Notes:
With the inclusion of aspect-ratio property, we can do away with the old intrinsic ratio hack, using padding-bottom: 100% and position: absolute. ew.