Aspect Ratio

CSS Aspect-Ratio alternative using JS

Usage

Simple Usage

1 / 1

4 / 3

16 / 9

preview

<template>  <div  class="p-4 text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis"  v-p-aspect-ratio="1 / 1">  1 / 1  </div>  <div  class="p-4 text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis"  v-p-aspect-ratio="4 / 3">  4 / 3  </div>  <div  class="p-4 text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis"  v-p-aspect-ratio="16 / 9">  16 / 9  </div> </template>  <script setup>  import { vPAspectRatio } from '@privyid/persona/directive' </script>

Fixed Size

Add modifier .fixed to enable fixed size, it'll use style height instead of min-height

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

preview

<template>  <div class="p-4 overflow-hidden text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis" v-p-aspect-ratio="1">  Lorem ipsum dolor sit amet, consectetur adipisicing elit.  </div>  <div class="p-4 overflow-hidden text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis" v-p-aspect-ratio.fixed="1">  Lorem ipsum dolor sit amet, consectetur adipisicing elit.  </div> </template>

API

Modifiers

Modifiers	Description
fixed	Enable fixed sized