Gerillass
v2.1.0* You can call mixins with or without the gls- namespace (e.g. @include gls-aspect-ratio();).
The Aspect Ratio Sass mixin holds an element to the ratio you give it. CSS
has an aspect-ratio property of its own, and this mixin adds the three things
that property leaves out.
Arguments
| Name | Type | Description |
|---|---|---|
$ratio (16/9) | string, number | The ratio to hold. Accepts a slash separated string such as |
$fit (cover) | string | Sets the |
Pass null as the second argument to leave object-fit out of the output entirely.
Examples
Call it without arguments and the ratio is 16/9.
.element {
@include aspect-ratio;
}.element {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
object-fit: cover;
}Because object-fit defaults to cover, the image is cropped to fill the box rather than stretched.
.element {
@include aspect-ratio("16:9");
}.element {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
object-fit: cover;
}A colon and a slash mean the same thing, so 16:9 and 16/9 give identical output.
.element {
@include aspect-ratio("4/3");
}.element {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
border: 0;
object-fit: cover;
}Pass a second value to change how the content fills the box. Here the box is square and the whole image stays visible.
.element {
@include aspect-ratio("1:1", contain);
background: #f0f0ee;
}.element {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border: 0;
object-fit: contain;
background: #f0f0ee;
}1.5 means 1.5 to 1. Passing null as the second argument leaves object-fit out, which is what you want when the element has no content of its own to fit.
.element {
@include aspect-ratio(1.5, null);
}.element {
display: block;
width: 100%;
aspect-ratio: 1.5;
border: 0;
}Apply the mixin to the iframe itself. There is no wrapper element and no padding hack.
.element {
@include aspect-ratio("16/9");
}.element {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
object-fit: cover;
}If you want the ratio without the rest of the mixin, validateRatio accepts the same values and returns just the ratio.
.element {
aspect-ratio: validateRatio("16:9");
}.element {
aspect-ratio: 16 / 9;
}Coming from Ratio Box or Responsive Video
Both of those mixins held a ratio with a padding-top hack, a pseudo-element
and an absolutely positioned child. The CSS aspect-ratio property made all of
that unnecessary, and it left the two mixins identical to each other, so they
were replaced by this single one.
The rename itself is mechanical. What is not mechanical is where the mixin goes: the old mixins were applied to a wrapping element, and this one goes on the element itself.
// Before, on a wrapper
.hero { @include ratio-box("16/9"); }
.video { @include responsive-video("16/9"); }
// After, on the element
.hero { @include aspect-ratio("16/9"); }
.video iframe { @include aspect-ratio("16/9"); }If you have a wrapper <div> around a video embed only to hold its ratio,
remove the wrapper along with the old mixin.