Aspect Ratio

Preview

Aspect Ratio constrains its children to a fixed width-to-height ratio, keeping media and embeds proportional as their container resizes.

#Usage

Aspect Ratio has a single Root part. Pass the content to constrain as children.

import * as AspectRatio from "@solidiom/aspect-ratio"

;<AspectRatio.Root ratio={16 / 9}>
  <img src="/cover.jpg" alt="Cover" />
</AspectRatio.Root>

#Installation

Install the package with pnpm add @solidiom/aspect-ratio. The package requires compatible solid-js and @solidjs/web peer dependencies.

#Parts

Aspect Ratio exposes a single Root part carrying data-scope="aspect-ratio" and data-part="root".

#Styling

Style the Root via the data-scope="aspect-ratio" and data-part="root" attributes. The ratio is applied inline; recipes typically only handle overflow and object-fit for media children.

#Keyboard & behavior

This primitive has no keyboard interaction. It renders a container that does not receive focus or respond to key events.

#SSR and hydration

Aspect Ratio is a passive layout element with no interactive state. It renders as static HTML and requires no client-side hydration.

solidiom add aspect-ratio