Radix2Solid

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Aspect Ratio

Displays content within a desired ratio.
Download runnable sandbox
import { AspectRatio } from "@radix-solid/primitives";

import styles from "./styles.module.css";

const AspectRatioDemo = () => <div class={styles.Container}>

		<AspectRatio.Root ratio={16 / 9}>

			<img class={styles.Image} src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" />

		</AspectRatio.Root>

	</div>;

export default AspectRatioDemo;

Features

  • Accepts any custom ratio.

Anatomy

Import the component.

import { AspectRatio } from "@radix-solid/primitives";

export default () => <AspectRatio.Root />;

API Reference

Root

Contains the content you want to constrain to a given ratio.

PropTypeDefault
asChildbooleanfalse
rationumber1