A PostCSS plugin to fix an element's dimensions to an aspect ratio.
The plugin provides three new properties and one new value type:
aspect-ratioproperty makes the height of this element relative to its width,
heightwill be dynamic based on the ratio.
aspect-ratiohas two aliases you can use instead:
aspect-ratioproperty that includes a value expressed as
'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.
<!-- Any content you like, very useful for video and image elements. -->
npm install postcss-aspect-ratio --save
A simple example using the custom ratio value
/* Input. *//* Output. *//* This targets .aspect-box__content *//* This pseudo element uses the padding trick to set the height. */
A more complex example using the ratio value
calc('4:3' - 20px).
/* Input. *//* Output. */