Returnless UI

Aspect Ratio ​

The AspectRatio component is a layout component that enforces a fixed aspect ratio on its children. This is useful when you want to ensure that a child component maintains a specific aspect ratio, regardless of the size of the parent component.

Usage ​

js
<script lang="ts" setup>
import { AspectRatio } from '@returnless/focus-ui';
</script>

<template>
  <div style="width: 400px;">
    <AspectRatio :ratio="16 / 9">
      <img src="https://www.retourneren.nl/media/catalog/product/cache/8d4d2075b1a30681853bef5bdc41b164/r/e/returnless_afbeelding.jpg">
    </AspectRatio>
  </div>
</template>