postcss-aspect-ratio-from-background-imagedeprecated

PostCSS plugin to generate element dimension styles based on background image aspect ratio

Usage no npm install needed!

<script type="module">
  import postcssAspectRatioFromBackgroundImage from 'https://cdn.skypack.dev/postcss-aspect-ratio-from-background-image';
</script>

README

PostCSS Aspect Ratio From Background Image Build Status Coverage

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') ])