Sections

Aspect ratio

Utilities for controlling the aspect ratio of an element in a container.

Class Properties
.ratio-1-1 padding-bottom: 100%;
.ratio-16-9 padding-bottom: 56.25%;
.ratio-4-3 padding-bottom: 75%;

The aspect ratio utility is designed for use with <iframe> elements, like YouTube videos. It serves as an alternative to preferred aspect ratios, which are not current supported by most browsers.

Usage

Use .ratio and .ratio-{aspect} to wrap an element that should be subject to a particular aspect ratio.

<div class="ratio ratio-16-9">
  <iframe src="https://www.youtube.com/embed/K1HlAsW1RiA" frameborder="0"></iframe>
</div>

Responsive

To include responsive variants like .md:ratio-1-1, add "aspect-ratio" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:

$responsive-variants: (
  // ...
  "aspect-ratio",
);

Hover-state

There are no hover variants for this utility.