webflow svelte components logoWFS

Aspect Ratio

Displays content while maintaining a specified aspect ratio, ensuring consistent visual proportions.

API Reference

Usage

<script lang="ts">
  import { AspectRatio } from '$lib/components/aspect-ratio';
</script>
<AspectRatio ratio={16 / 9}>
  <img class="aspect-ratio__image" src="/placeholder.jpg" alt="Placeholder" />
</AspectRatio>

Properties

The AspectRatio component extends the Bits UI <AspectRatio> component. Find the full list of available properties in the official Bits UI documentation.

Previous

Accordion

Next

Avatar

On this page