Aspect Ratio

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

an abstract painting

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.