Windi CSSAspect Ratio
Utilities
| Class | Properties |
|---|---|
aspect-auto | aspect-ratio: auto; |
aspect-square | aspect-ratio: 1 / 1; |
aspect-video | aspect-ratio: 16 / 9; |
aspect-none | position: 'static'; paddingBottom: '0'; '> *': { position: 'static'; height: 'auto'; width: 'auto'; top: 'auto'; right: 'auto'; bottom: 'auto'; left: 'auto'; } |
aspect-w-${float} | --tw-aspect-w: ${float}; |
aspect-h-${float} | --tw-aspect-h: ${float}; |
aspect-${fraction} | position: 'relative'; paddingBottom: ${percent};'> *': { position: 'absolute'; height: '100%'; width: '100%'; top: '0'; right: '0'; bottom: '0'; left: '0'; } |
aspect-w-${float} will add the following base styles:
.aspect-w-${float} {
position: 'relative';
padding-bottom: 'calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)';
}
.aspect-w-${float} > * {
position: 'absolute';
height: '100%';
width: '100%';
top: '0';
right: '0';
bottom: '0';
left: '0';
}
Usage
windi.config.js
export default {
theme: {
// ...
},
plugins: [
require('windicss/plugin/aspect-ratio'),
// ...
],
}