Aspect Ratio
Displays content within a desired ratio. Commonly used for embedding images, videos, or maps.
Component Features
- 📐 Ratio Control: Set content aspect ratio via
ratio prop, supporting 16/9, 4/3, 1 and other common ratios.
- 📱 Responsive Layout: Combine with Vue reactivity or TailwindCSS breakpoints for different ratios per screen size.
- 🖼️ Media Adaptation: Ideal for embedding images, videos, or maps requiring fixed ratios.
- 🎨 Theme Customization: Rounded corners and styles inherit from
BrConfigProvider global configuration.
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).
<script setup lang="ts">
import { BrAspectRatio } from '@breezeui/vue'
</script>
<template>
<div class="w-[450px] overflow-hidden rounded-md border shadow-sm">
<BrAspectRatio :ratio="16 / 9">
<img
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
class="h-full w-full object-cover"
/>
</BrAspectRatio>
</div>
</template>
Custom Ratio (1:1)
You can set the ratio to 1 (i.e., 1:1) to display square content.
<script setup lang="ts">
import { BrAspectRatio } from '@breezeui/vue'
</script>
<template>
<div class="w-[300px] overflow-hidden rounded-md border shadow-sm">
<BrAspectRatio :ratio="1">
<img
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
class="h-full w-full object-cover"
/>
</BrAspectRatio>
</div>
</template>
Responsive Ratio Switching
By combining Vue's reactivity or TailwindCSS breakpoint classes, you can implement ratio switching for different screen sizes.
<script setup lang="ts">
import { BrAspectRatio } from '@breezeui/vue'
</script>
<template>
<!-- Use class Control component visibility at different ratios for responsiveness -->
<div class="w-full max-w-[450px] overflow-hidden rounded-md border shadow-sm">
<BrAspectRatio :ratio="16 / 9" class="hidden md:block">
<img
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
class="h-full w-full object-cover"
/>
</BrAspectRatio>
<BrAspectRatio :ratio="4 / 3" class="block md:hidden">
<img
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
class="h-full w-full object-cover"
/>
</BrAspectRatio>
</div>
</template>
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).
<script setup lang="ts">
import { BrConfigProvider, BrAspectRatio } from '@breezeui/vue'
</script>
<template>
<BrConfigProvider :theme="{ radius: 0.5 }">
<!-- AspectRatio If internal uses rounded-md classes like，will automatically apply radius Configuration -->
<div class="rounded-md overflow-hidden w-[450px] border shadow-sm">
<BrAspectRatio :ratio="16 / 9">
<img
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
class="h-full w-full object-cover"
/>
</BrAspectRatio>
</div>
</BrConfigProvider>
</template>
API