yisibl / postcss-aspect-ratio-mini

A PostCSS plugin to fix an element's dimensions to an aspect ratio

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

Changelog

License