Aspect ratio

A layout component that ensures content maintains a consistent aspect ratio, providing a reliable way to preserve proportional dimensions across different layouts. It is particularly useful for scenarios like embedding media or designing responsive elements, where maintaining a specific shape is essential for visual harmony and adaptability.

Props

aspect-ratio: number
The aspect ratio, can be a formula such as "16 / 9".

Slots

default
The contents of the element.

Examples

Basic

A basic aspect ratio.

Preview

16:9

Code

<template>
    <FluxAspectRatio :aspect-ratio="16 / 9">
        <FluxPane style="align-items: center; display: flex; justify-content: center;">
            16:9
        </FluxPane>
    </FluxAspectRatio>
</template>

<script
    setup
    lang="ts">
    import { FluxAspectRatio, FluxPane } from '@flux-ui/components';
</script>