Skip to content
On this page

Aspect Ratio

CSS Aspect-Ratio alternative using JS

Usage

Simple Usage

1 / 1
4 / 3
16 / 9
preview
vue
<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
vue
<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

ModifiersDescription
fixedEnable fixed sized

Released under the MIT License.