Atomic Bulldog - UI/pattern library

1.2 - Aspect ratio container

Source: atoms/_aspect-ratio-container.scss, line 29

Open in new window

Responsive images class

Examples:

Default styling
[modifier]
.is-1x1

1x1

is-1x1
.is-16x9

16x9

is-16x9
.is-4x3

4x3

is-4x3
.is-golden

golden

is-golden
.is-silver

silver

is-silver
<div style="max-width: 300px"> <!-- Just for kss -->
 <div class="aspect-ratio-container [modifier]">
   <div class="aspect-ratio-content has-bg-primary">[modifier]</div>
 </div>
</div>