Aspect 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:

css

.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

export default {
  theme: {
    // ...
  },
  plugins: [
    require('windicss/plugin/aspect-ratio'),
    // ...
  ],
}