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>

Video placeholder

A 16:9 placeholder commonly used for video thumbnails.

Preview

Code

<template>
    <Preview>
        <FluxAspectRatio
            :aspect-ratio="16 / 9"
            style="width: 100%; max-width: 480px; background: var(--surface-active); border-radius: var(--radius); overflow: hidden">
            <FluxStack
                is-centered
                style="height: 100%">
                <FluxIcon
                    name="play"
                    :size="48"/>
            </FluxStack>
        </FluxAspectRatio>
    </Preview>
</template>

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