<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>

There are no notes for this item.

<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: uswds
  version: 2.8.0
uswds:
  path: ../../dist