| 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>Variants
By default, only responsive variants are generated for aspect ratio utilities.
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.