Vitral 0.2
Media

AspectRatio

A box that keeps its ratio as its width changes, with the content cropped to fill it.

WAI-ARIA tested

Import

main.ts
import { AspectRatio } from '@vitral/vue';

Ratios

Mountains under clouds
16 / 9
A waterfall in a forest
4 / 3
A person in a field
1 / 1
<script setup lang="ts">import { AspectRatio } from '@vitral/vue';</script> <template>    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; width: 100%">        <figure style="margin: 0">            <AspectRatio :ratio="16 / 9" style="border-radius: 8px"><img src="https://picsum.photos/id/1018/640/360" alt="Mountains under clouds" /></AspectRatio>            <figcaption style="font-size: 0.75rem; color: var(--vt-text-muted-color)">16 / 9</figcaption>        </figure>        <figure style="margin: 0">            <AspectRatio :ratio="4 / 3" style="border-radius: 8px"><img src="https://picsum.photos/id/1039/480/360" alt="A waterfall in a forest" /></AspectRatio>            <figcaption style="font-size: 0.75rem; color: var(--vt-text-muted-color)">4 / 3</figcaption>        </figure>        <figure style="margin: 0">            <AspectRatio style="border-radius: 50%"><img src="https://picsum.photos/id/1027/320/320" alt="A person in a field" /></AspectRatio>            <figcaption style="font-size: 0.75rem; color: var(--vt-text-muted-color)">1 / 1</figcaption>        </figure>    </div></template>

API

Read from packages/vue/src/components/AspectRatio/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
rationumberWidth over height: `16 / 9`, `1`, `4 / 3`. Defaults to 1.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Slots

NameSlot propsDescription
default—What fills the box: an image, a video, a map.