AspectRatio

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