Why?

Embedded media, for example YouTube, videos generally need to keep a specific aspect ratio across a responsive site.

Usage

  • Used for enforcing an aspect ratio for iframes, videos etc
  • use modifiers for different ratios.
SASS docs for maintain ratio

Variants

Basic usage - 16x9

<div class="maintain-ratio maintain-ratio--16-9">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>

4x3

<div class="maintain-ratio maintain-ratio--4-3">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>

Custom - with BEM element

Use .maintain-ratio__item for custom content:

<div class="maintain-ratio maintain-ratio--4-3">
    <img class="maintain-ratio__item" src="http://placehold.it/800x600" alt="An example of an image with a ratio of 4:3" />
</div>