1.0.1 • Published 7 years ago
postcss-ratio v1.0.1
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>
<!--Your Content Here -->
</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;
}