postcss-aspect-ratio-polyfill

    2.0.0 • Public • Published

    PostCSS Aspect Ratio Polyfill

    A PostCSS plugin to support aspect-ratio property.

    Install

    npm i -D postcss-aspect-ratio-polyfill

    Usage

    const postcss = require('postcss')
    
    const output = postcss()
      .use(require('postcss-aspect-ratio-polyfill'))
      .process(require('fs').readFileSync('input.css', 'utf8'))
      .css

    Basis

    input:

    .aspect-ratio-box {
      aspect-ratio: 16 / 9;
    }

    output:

    .aspect-ratio-box::before {
      float: left;
      padding-top: 56.25%;
      content: '';
    }
    .aspect-ratio-box::after {
      display: block;
      content: '';
      clear: both;
    }

    With object-fit

    <div class="aspect-ratio-box">
      <img src="https://picsum.photos/1280/720">
    </div>

    input:

    .aspect-ratio-box {
      position: relative;
      max-width: 500px;
      aspect-ratio: 16 / 9;
    }
    .aspect-ratio-box > img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    output:

    .aspect-ratio-box {
      position: relative;
      max-width: 500px;
    }
    .aspect-ratio-box::before {
      float: left;
      padding-top: 56.25%;
      content: '';
    }
    .aspect-ratio-box::after {
      display: block;
      content: '';
      clear: both;
    }
    .aspect-ratio-box > img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    Install

    npm i postcss-aspect-ratio-polyfill

    DownloadsWeekly Downloads

    2,636

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    4.84 kB

    Total Files

    4

    Last publish

    Collaborators

    • takamoso