Fylgja component - Aspect Ratio
Table of Contents
The aspect ratio component is used to set videos to a certain responsive aspect ratio,
but can also be used for images and other content.
Installation
npm install @fylgja/aspect-ratio
Then include the component in to your code via;
@use "@fylgja/aspect-ratio";
// Or via PostCSS import
@import "@fylgja/aspect-ratio";
How to use
To use the aspect-ratio, create element with the class .aspect-ratio
, any child of the aspect-ratio will now always be show in the ratio set by the class.
16/9 is the default ratio.
To edit the ratio use the css variable with the same name.
<div class="aspect-ratio" style="--aspect-ratio: 21/9;">..</div>
Config
As with almost all of our components, CSS variables can be configured to add your own look/style.
Want direct control on the base styles, here are the following SCSS variables can you modify.
$aspect-ratio: "16/9" !default;
PostCSS Calc & CSSNano issue
At the moment PostCSS Calc, which is also part of CSSNano, has an open issue where is removes the parentheses around a nested calc, this breaks the CSS aspect ratio calc.
You can at the moment work around this issue by;
- Wrapping the value from the CSS variable in parentheses.
- Using a multiplier instead
- CSSNano: disabling the calc minification
cssnano: {
preset: ['default', {
calc: false
}]
}
Find more about the postcss/postcss-calc issue on the github issue#91