https://github.com/yisibl/postcss-aspect-ratio-mini

A PostCSS plugin to fix an element's dimensions to an aspect ratio
https://github.com/yisibl/postcss-aspect-ratio-mini

aspect-ratio css postcss postcss-plugin postcss-plugins

Last synced: 16 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/yisibl/postcss-aspect-ratio-mini
• Owner: yisibl
• License: mit
• Created: 2017-07-12T07:14:12.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-11-25T13:41:16.000Z (almost 3 years ago)
• Last Synced: 2024-10-09T08:09:05.497Z (about 1 month ago)
• Topics: aspect-ratio, css, postcss, postcss-plugin, postcss-plugins
• Language: JavaScript
• Homepage:
• Size: 13.7 KB
• Stars: 129
• Watchers: 5
• Forks: 7
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[travis]:       https://travis-ci.org/yisibl/postcss-aspect-ratio-mini

[travis-img]:   https://img.shields.io/travis/yisibl/postcss-aspect-ratio-mini.svg

# PostCSS Aspect Ratio Mini [![Travis Build Status][travis-img]][travis]

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

There is already a standard [aspect-ratio](https://drafts.csswg.org/css-sizing-4/#aspect-ratio) in the CSS specification, and Chrome has [experimental support](https://bugs.chromium.org/p/chromium/issues/detail?id=1045668#c16). **So it is recommended to use `/` to separate values, the next version may deprecate `:` separator.**

## Install

```shell

npm i postcss-aspect-ratio-mini --save

```

## Usage

```js

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

```css

.aspect-box {

    position: relative;

}

.aspect-box {

    aspect-ratio: 16 / 9;

}

.aspect-box2 {

    aspect-ratio: 0.1 / 0.3;

}

```

### Output

```css

.aspect-box {

    position: relative;

}

.aspect-box:before {

    padding-top: 56.25%;

}

.aspect-box2:before {

    padding-top: 300%;

}

```

## Test

```shell

npm test

```

## [Changelog](CHANGELOG.md)

## [License](LICENSE)