0.7.5 • Published 6 years ago
aspect-css v0.7.5
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>