Aspect ratio

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

In this article

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.


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="" frameborder="0"></iframe>


By default, only responsive variants are generated for aspect ratio utilities.


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: (
  // ...


There are no hover variants for this utility.

Questions or feedback about this article? Let us know