Aspect Ratio
Displays content with a specified aspect ratio, ensuring consistent and visually balanced presentation.
<script lang="ts">
import * as AspectRatio from "@/components//ui/aspect-ratio";
</script>
<AspectRatio.Root ratio={16 / 9} class="bg-muted">
<img
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Gray by Drew Beamer"
class="rounded-md object-cover h-full w-full"
/>
</AspectRatio.Root>
<script lang="ts">
import * as AspectRatio from "@/components//ui/aspect-ratio";
</script>
<AspectRatio.Root ratio={16 / 9} class="bg-muted">
<img
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Gray by Drew Beamer"
class="rounded-md object-cover h-full w-full"
/>
</AspectRatio.Root>
Structure
<script lang="ts">
import { AspectRatio } from "bits-ui";
</script>
<AspectRatio.Root />
<script lang="ts">
import { AspectRatio } from "bits-ui";
</script>
<AspectRatio.Root />
Component API
The aspect ratio component.
| Property | Type | Description |
|---|---|---|
ratio | number | The desired aspect ratio. Default: 1 |
🚧 UNDER CONSTRUCTION 🚧