Aspect Ratio · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JAspectRatio } from '@juxtui/ui'

Usage #

<JAspectRatio :ratio="16 / 9" class="overflow-hidden rounded-lg">
  <img src="/cover.jpg" alt="" class="h-full w-full object-cover" />
</JAspectRatio>

The component only reserves the box — rounding, overflow-hidden and the fit of the content are yours, via class on the root. Content is stretched to fill with object-fit: cover for img, video, iframe and canvas children automatically.

Variants & examples #

A 1:1 grid#

Three equal thumbnails, each ratio-locked.

<template>
  <div class="grid w-full max-w-sm grid-cols-3 gap-3">
    <JAspectRatio :ratio="1" class="overflow-hidden rounded-md bg-surface-active">
      <img src="/avatars/1.svg" alt="" class="h-full w-full object-cover">
    </JAspectRatio>
    <JAspectRatio :ratio="1" class="overflow-hidden rounded-md bg-surface-active">
      <img src="/avatars/2.svg" alt="" class="h-full w-full object-cover">
    </JAspectRatio>
    <JAspectRatio :ratio="1" class="overflow-hidden rounded-md bg-surface-active">
      <img src="/avatars/3.svg" alt="" class="h-full w-full object-cover">
    </JAspectRatio>
  </div>
</template>

Wide video frame#

A 21:9 ratio for a cinematic player placeholder.

21:9 video player

<template>
  <div class="w-full max-w-sm">
    <JAspectRatio :ratio="21 / 9" class="overflow-hidden rounded-lg bg-ink">
      <div class="flex h-full w-full items-center justify-center text-sm text-ink-fg">
        21:9 video player
      </div>
    </JAspectRatio>
  </div>
</template>

API #

Props

Prop	Type	Default	Description
ratio	`number`	`16 / 9`	Width/height ratio, e.g. `16 / 9` or `1`.

Slots

Slot	Props	Description
default	—	The content to lock to the ratio, typically an image or video.

Accessibility #

A plain <div> with no implicit role — any semantics come entirely from the content you put inside it, e.g. alt text on an img.