postcss-aspect-ratio-from-background-image v0.0.4

PostCSS Aspect Ratio From Background Image

PostCSS plugin to generate element dimension styles based on background image aspect ratio (see related article). SVG files only supported at this moment.

Input:

.image {
  background-image: url('path-to-image');
}

Output:

.image:after {
  background-image: url('path-to-image');
  padding-top: 33% /* calculated image aspect ratio here */
}

Installation

npm install postcss-aspect-ratio-from-background-image

Usage

postcss([ require('postcss-aspect-ratio-from-background-image') ])