PersonaAspect Ratio
CSS Aspect-Ratio alternative using JS
Usage
Simple Usage
1 / 1
4 / 3
16 / 9
previewvue
<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.
previewvue
<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 |