Aspect Ratio

bo-aspect-ratio reserves space for its default slot by applying the corresponding aspect ratio before the content is rendered.

Basic Usage

Pass a numeric ratio, such as 16 / 9 or 1, and place content in the default slot. The default ratio is approximately 16:9.

16:9 content

<bo-aspect-ratio :ratio="16 / 9">
  <div class="flex h-full items-center justify-center bg-neutral-200 dark:bg-neutral-800">
    16:9 content
  </div>
</bo-aspect-ratio>

<bo-aspect-ratio :ratio="1">
  <img class="h-full w-full object-cover" src="/assets/logo.webp" alt="Bamboo mark" />
</bo-aspect-ratio>

Accessibility

The wrapper does not add an accessible name by itself. Use role when the ratio container represents a meaningful region, and label that region through the surrounding content or the appropriate ARIA attributes on the contained content.

API Reference

Props

Prop	Type	Default	Description
id	string	Autogenerated	The id of the outer wrapper.
dataTestId	string	Autogenerated	The test id of the outer wrapper.
ratio	number	1.777778	Width divided by height.
role	HTMLAttributes['role']	-	Optional ARIA role for the wrapper.

Slots

Name	Description
default	Content constrained by the ratio.