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

Changelog

License