Aspect Ratio

Container que mantém uma proporção fixa entre largura e altura.

Uso

<script setup lang="ts">
import { AspectRatio } from '@halfbyte/maka'
</script>

<template>
  <AspectRatio :ratio="16/9">
    <img src="…" alt="…" style="width:100%;height:100%;object-fit:cover" />
  </AspectRatio>
</template>

Exemplos

<AspectRatio :ratio="16/9">…</AspectRatio>
<AspectRatio :ratio="1">…</AspectRatio>
<AspectRatio :ratio="4/3">…</AspectRatio>

Props

Prop	Tipo	Padrão
ratio	number	16/9

Slots

Slot	Descrição
default	Conteúdo a ser exibido na proporção