Aspect Ratio
Displays content while maintaining a specified aspect ratio, ensuring consistent visual proportions.
<script lang="ts">
import { AspectRatio } from "$lib";
</script>
<AspectRatio.Root ratio={16 / 9} class="scale-80 rounded-[15px] bg-transparent">
<img
src="/abstract.png"
alt="an abstract painting"
class="h-full w-full rounded-[15px] object-cover"
/>
</AspectRatio.Root>
<script lang="ts">
import { AspectRatio } from "$lib";
</script>
<AspectRatio.Root ratio={16 / 9} class="scale-80 rounded-[15px] bg-transparent">
<img
src="/abstract.png"
alt="an abstract painting"
class="h-full w-full rounded-[15px] object-cover"
/>
</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 |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
—— undefined |
| Data Attribute | Value | Description |
|---|---|---|
data-aspect-ratio-root | —— | Present on the element. |