# postcss-aspect-ratio-mini

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

Latest version **1.1.0** (published 2020-05-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-aspect-ratio-mini
pnpm add postcss-aspect-ratio-mini
yarn add postcss-aspect-ratio-mini
bun add postcss-aspect-ratio-mini
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-05-15 |
| First published | 2017-07-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.8 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 131 |
| Author | yisibl |
| Maintainers | yisi |
| Keywords | postcss, postcss-plugin, postcss-aspect-ratio, plugin, aspect-ratio, aspect, ratio |

## Links

- npm: https://www.npmjs.com/package/postcss-aspect-ratio-mini
- Repository: https://github.com/yisibl/postcss-aspect-ratio-mini
- Issues: https://github.com/yisibl/postcss-aspect-ratio-mini/issues
- npm.io page: https://npm.io/package/postcss-aspect-ratio-mini

## Dependencies (2)

- [postcss](https://npm.io/package/postcss.md) ^7.0.6
- [number-precision](https://npm.io/package/number-precision.md) ^1.3.2

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2020-05-15
- 1.0.1 — 2018-12-03
- 1.0.0 — 2018-12-03
- 0.0.2 — 2017-07-12
- 0.0.1 — 2017-07-12

## 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)

---
_Source: https://npm.io/package/postcss-aspect-ratio-mini · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._