Aspect Ratio

Displays content within a desired ratio.

<script setup lang="ts">
import { AspectRatio } from 'akar';
import './styles.css';
</script>

<template>
  <div class="akar-demo akar-demo-AspectRatio">
    <div class="Container">
      <AspectRatio :ratio="16 / 9">
        <img
          class="Image"
          src="https://images.unsplash.com/photo-1498855926480-d98e83099315?w=300&dpr=2&q=80"
          alt="Landscape photograph by Tobias Tullius"
        >
      </AspectRatio>
    </div>
  </div>
</template>

@import '../_colors/black-alpha.css';

@scope (.akar-demo-AspectRatio) {
  .Container {
    width: 300px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px var(--black-a7);
  }

  .Image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

Features

Accepts any custom ratio.

Installation

Install the component from your command line.

pnpm add akar

yarn add akar

npm install akar

bun add akar

Anatomy

Import the component.

<script setup>
import { AspectRatio } from 'akar';
</script>

<template>
  <AspectRatio />
</template>

API Reference

Root

Contains the content you want to constrain to a given ratio.

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`ratio`	`1`	`number` The desired ratio. Eg: 16/9

Slot (default)	Payload
`aspect`	`number` Current aspect ratio (in %)

AspectRatio.vue source

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Autocomplete

An input with suggestions that allows free-form text entry. Unlike Combobox, the value is the input text itself rather than a selected item.