A twind extension that provides a composable API for giving elements a fixed aspect ratio.
npm install @twind/aspect-ratioA Twind extension that provides a composable API for giving elements a fixed aspect ratio.
> Based on @tailwindcss/aspect-ratio.
Install from npm:
``shUsing npm
npm install @twind/aspect-ratio
Usage as Directive
Note that due to the way this currently needs to be implemented (the old padding-bottom trick) you need to assign the aspect ratio to a _parent_ element, and make the actual element you are trying to size the only child of that parent.
property is supported in modern browsers, we'll add official support to Twind itself and deprecate this plugin.Use the
aspectRatio function to specify the aspect ratio for an element:`js
import { aspectRatio } from '@twind/aspect-ratio'document.body.innerHTML =
// Alternative APIs
aspectRatio('16/9')
aspectRatio({ w: 16, h: 9 })
To remove any aspect ratio, use
:`js
document.body.innerHTML =
Usage as Plugin
Add to plugins of your setup call:
js
import { aspectRatio } from '@twind/aspect-ratio'setup({
plugins: {
aspect: aspectRatio,
},
})
`Combine the
and aspect-h-{n} classes to specify the aspect ratio for an element:`html
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
`Use
shorthand:`html
`Use
shorthand:`html
`Use
to remove any aspect ratio behavior:`html
``