Aspect Ratio

Displays content within a desired ratio. Commonly used for embedding images, videos, or maps.

Introduction

The BrAspectRatio component is based on BrConfigProvider for global theme configuration, replicating the core capabilities of the shadcn-vue AspectRatio. It allows you to set the aspect ratio of content via simple props, supporting responsive layout and custom styles.

Basic Usage

The simplest usage is specifying the ratio prop. Common ratios include 16/9 (Video), 4/3 (Standard), 1 (Square).

Example

Custom Ratio (1:1)

You can set the ratio to 1 (i.e., 1:1) to display square content.

Example

Responsive Ratio Switching

By combining Vue's reactivity or TailwindCSS breakpoint classes, you can implement ratio switching for different screen sizes.

Example

Theme Customization

BrAspectRatio styles (like border-radius) inherit from BrConfigProvider global configuration by default. By modifying the radius variable, you can affect the AspectRatio's border radius (if rounded-[var(--radius)] or related classes are applied).

Example

API

Prop	Type	Default	Description
ratio	number	1	The aspect ratio (width / height)
asChild	boolean	false	Whether to render as a child element (Slot mode)
class	string	-	Custom class name, supports Tailwind classes