aspect-ratio
Sets the fixed aspect ratio of the element via padding hack with ::before pseudo-element.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| $width * | number | — | The needed element width. |
| $height | number | $width | The needed element height. |
Example
@use 'more-sass' as more;
.element {
@include more.aspect-ratio(1280px, 720px); // 16:9
}
.element {
display: block;
position: relative;
}
.element::before {
content: '';
display: block;
padding-top: 56.25%;
}