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