Aspect Ratio

Displays content while maintaining a specified aspect ratio, ensuring consistent visual proportions.

	<script lang="ts">
  import { AspectRatio } from "bits-ui";
</script>
 
<AspectRatio.Root ratio={14 / 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 />

API Reference

AspectRatio.Root

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.