https://github.com/arccoza/postcss-aspect-ratio
A PostCSS plugin to fix an element's dimensions to an aspect ratio.
https://github.com/arccoza/postcss-aspect-ratio
aspect-ratio css postcss postcss-plugin
Last synced: 5 months ago
JSON representation
A PostCSS plugin to fix an element's dimensions to an aspect ratio.
- Host: GitHub
- URL: https://github.com/arccoza/postcss-aspect-ratio
- Owner: arccoza
- License: mit
- Created: 2016-01-28T13:41:48.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-01-25T03:05:06.000Z (about 7 years ago)
- Last Synced: 2025-04-07T01:50:39.513Z (10 months ago)
- Topics: aspect-ratio, css, postcss, postcss-plugin
- Language: JavaScript
- Size: 29.3 KB
- Stars: 40
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[travis]: https://travis-ci.org/arccoza/postcss-aspect-ratio
[travis-img]: https://img.shields.io/travis/arccoza/postcss-aspect-ratio.svg
# PostCSS Aspect Ratio [![Travis Build Status][travis-img]][travis]
A PostCSS plugin to fix an element's dimensions to an aspect ratio.
## Explanation
The plugin provides three new properties and one new value type:
* The `aspect-ratio` property makes the height of this element relative to its width, `height` will be dynamic based on the ratio. `aspect-ratio` has two aliases you can use instead:
* `ratio`
* `aspect`
* An `aspect-ratio` property that includes a value expressed as `'NUM:NUM'` (eg. `'4:3'`) will automatically be converted to a percentage (3/4 * 100 = 75%). You must wrap the value in single ' or double " quotes.
The effect is achieved using the quirky behaviour of CSS percentage padding; any element with a percentage value for its padding property will use the width of its container to calculate that percentage.
Therefore this plugin requires a specific HTML structure to work. The element you wish to constrain with an aspect ratio and a single inner element that will hold its contents.
```html
```
## Install
`npm install postcss-aspect-ratio --save`
## Example 1
A simple example using the custom ratio value `'16:9'`.
```css
/* Input. */
.aspect-box {
position: relative;
background: lime;
aspect-ratio: '16:9';
}
/* Output. */
.aspect-box {
position: relative;
background: lime;
box-sizing: border-box;
}
.aspect-box > * /* This targets .aspect-box__content */ {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
}
.aspect-box:before /* This pseudo element uses the padding trick to set the height. */ {
position: relative;
display: block;
content: "";
padding-top: 56.25%;
box-sizing: border-box;
}
```
## Example 2
A more complex example using the ratio value `calc('4:3' - 20px)`.
```css
/* Input. */
.aspect-box {
position: relative;
background: lime;
aspect-ratio: calc('4:3' - 20px);
}
/* Output. */
.aspect-box {
position: relative;
background: lime;
box-sizing: border-box;
}
.aspect-box > * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
}
.aspect-box:before {
position: relative;
display: block;
content: "";
padding-top: calc(75% - 20px);
box-sizing: border-box;
}
```