postcss-aspect-ratio-mini
v1.1.0
Published
A PostCSS plugin to fix an element's dimensions to an aspect ratio.
Downloads
717
Maintainers
Readme
PostCSS Aspect Ratio Mini
A PostCSS plugin to fix an element's dimensions to an aspect ratio.
There is already a standard aspect-ratio in the CSS specification, and Chrome has experimental support. So it is recommended to use /
to separate values, the next version may deprecate :
separator.
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;
}
.aspect-box2 {
aspect-ratio: 0.1 / 0.3;
}
Output
.aspect-box {
position: relative;
}
.aspect-box:before {
padding-top: 56.25%;
}
.aspect-box2:before {
padding-top: 300%;
}
Test
npm test