@cryptic-css/plugin-ratio

Adds support for the well-known "padding hack" for keeping aspect ratios.

Supported props

• padding (p)
• padding-top (pT)
• padding-right (pR)
• padding-bottom (pB)
• padding-left (pL)
• margin (m)
• margin-top (mT)
• margin-right (mR)
• margin-bottom (mB)
• margin-left (mL)

Usage

Live Editor

ccss({ paddingTop: '16:9' })

ccss({
    paddingTop: '16:9'
})

Result

padding-top: 56.25%;

Configuration

The plugin is included in the ccss package pre-configured. Skip this step if you don't need custom configuration and/or CCSS instance.

import ccss from '@cryptic-css/core'

import pluginRatio from '@cryptic-css/plugin-ratio'

ccss.use(pluginRatio)