postcss-ratio
1.0.1 • Public • Published PostCSS Aspect Ratio
PostCSS plugin to simplify maintaining an elements aspect ratio.
Usage
npm install --save-dev postcss-ratio
postcss([ require('postcss-ratio') ])
See PostCSS docs for examples for your environment.
Markup
<div class="foo">
<div>
</div>
</div>
CSS
.foo {
width: 300px;
ratio: '1:2';
}
After PostCSS
.foo {
width: 300px;
position: relative;
}
.foo::before {
display: block;
content: "";
width: 100%;
padding-top: 50%;
}
.foo > * {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Package Sidebar
Install
Weekly Downloads