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>