<style>
.aspect-example__inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 45.7px;
font-family: Roboto Mono Web, Bitstream Vera Sans Mono, Consolas, Courier, monospace;
}
</style>
<p>
Aspect ratios are helpful for dealing with responsive media. Also available via a <code>add-aspect()</code> mixin.
</p>
<div class="add-aspect-9x16 aspect-example bg-primary-lighter margin-y-7">
<div class="aspect-example__inner">
9x16
</div>
</div>
<div class="add-aspect-16x9 bg-primary-lighter margin-y-7">
<div class="aspect-example__inner">
16x9
</div>
</div>
<div class="add-aspect-1x1 bg-primary-lighter margin-y-7">
<div class="aspect-example__inner">
1x1
</div>
</div>
<div class="add-aspect-4x3 bg-primary-lighter margin-y-7">
<div class="aspect-example__inner">
4x3
</div>
</div>
<div class="add-aspect-2x1 bg-primary-lighter margin-y-7">
<div class="aspect-example__inner">
2x1
</div>
</div>
No notes defined.
<style>
.aspect-example__inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 45.7px;
font-family: Roboto Mono Web, Bitstream Vera Sans Mono, Consolas, Courier, monospace;
}
</style>
<p>
Aspect ratios are helpful for dealing with responsive media. Also available via a <code>add-aspect()</code> mixin.
</p>
<div class="add-aspect-9x16 aspect-example bg-primary-lighter margin-y-7">
<div class="aspect-example__inner">
9x16
</div>
</div>
<div class="add-aspect-16x9 bg-primary-lighter margin-y-7">
<div class="aspect-example__inner">
16x9
</div>
</div>
<div class="add-aspect-1x1 bg-primary-lighter margin-y-7">
<div class="aspect-example__inner">
1x1
</div>
</div>
<div class="add-aspect-4x3 bg-primary-lighter margin-y-7">
<div class="aspect-example__inner">
4x3
</div>
</div>
<div class="add-aspect-2x1 bg-primary-lighter margin-y-7">
<div class="aspect-example__inner">
2x1
</div>
</div>
package:
name: null
version: 2.1.0
uswds:
path: ../../dist