@tkh/tailwind-plugin-aspect-ratio
v3.0.0
Published
Tailwindcss plugin to break elements out of width constraints and take up the full viewport
Downloads
3
Readme
@tkh/tailwind-plugin-aspect-ratio
Tailwindcss plugin to apply an aspect ratio to objects (images and videos).
Install
npm install @tkh/tailwind-plugin-aspect-ratio
Usage
Merge the plugin configuration with your tailwind.config.js
module.exports = {
plugins: [require('@tkh/tailwind-plugin-aspect-ratio')()],
}
Apply an aspect ratio
To create a square aspect ratio use .aspect-ratio-square
<div class="relative aspect-square">
<img
src="https://via.placeholder.com/260"
class="absolute top-0 left-0 w-full h-full object-cover"
/>
</div>
To create a 16x9 aspect ratio use .aspect-ratio-wide
<div class="relative aspect-wide">
<img
src="https://via.placeholder.com/260"
class="absolute top-0 left-0 w-full h-full object-cover"
/>
</div>