Logo Windi CSS

Соотношение сторон

Утилиты

КлассСвойства
aspect-noneposition: '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} добавит следующие базовые стили:

.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';
}

Использование

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