aspect
A series of CSS aspect ratios
Basic Classes
<div class="aspect--double"></div>| Classname | ratio |
|---|---|
aspect--quadruple |
4 : 1 |
aspect--triple |
3 : 1 |
aspect--eight-thirds |
8 : 3 |
aspect--five-halves |
5 : 2 |
aspect--double |
2 : 1 |
aspect--fifteen-eighths |
15 : 8 |
aspect--sixteen-ninths |
16 : 9 |
aspect--five-thirds |
5 : 3 |
aspect--golden-portrait |
1.618 : 1 |
aspect--eight-fifths |
8 : 5 |
aspect--three-halves |
3 : 2 |
aspect--four-thirds |
4 : 3 |
aspect--five-fourths |
5 : 4 |
aspect--six-fifths |
6 : 5 |
aspect--nine-eighths |
9 : 8 |
aspect--sixteen-fifteenths |
16 : 15 |
aspect--square |
1 : 1 |
aspect--fifteen-sixteenths |
15 : 16 |
aspect--eight-ninths |
8 : 9 |
aspect--five-sixths |
5 : 6 |
aspect--four-fifths |
4 : 5 |
aspect--three-fourths |
3 : 4 |
aspect--two-thirds |
2 : 3 |
aspect--five-eighths |
5 : 8 |
aspect--golden-landscape |
1 : 1.618 |
aspect--three-fifths |
3 : 5 |
aspect--nine-sixteenths |
9 : 16 |
aspect--eight-fifteenths |
8 : 15 |
aspect--one-half |
1 : 2 |
aspect--two-fifths |
2 : 5 |
aspect--three-eighths |
3 : 8 |
aspect--one-third |
1 : 3 |
aspect--one-fourth |
1 : 4 |
Responsive Classes
This follows the Bootstrap v4 Breakpoints but can be overridden
| Classname | Default Breakpoint |
|---|---|
| xs | 0 |
| sm | 576px |
| md | 768px |
| lg | 992px |
| xl | 1200px |
<div class="aspect--two-thirds aspect--md-double"></div>