PostCSS Aspect Ratio Mini
A PostCSS plugin to fix an element's dimensions to an aspect ratio.
Install
npm i postcss-aspect-ratio-mini --save
Usage
var postcss = require('postcss')
var output = postcss()
.use(require('postcss-aspect-ratio-mini'))
.process(require('fs').readFileSync('input.css', 'utf8'))
.css
Example
A simple example using the custom ratio value '16:9'
.
Input
.aspect-box {
position: relative;
}
.aspect-box {
aspect-ratio: '16:9';
}
Output
.aspect-box {
position: relative;
}
.aspect-box:before {
padding-top: 56.25%;
}
Test
npm test