AspectRatio

AspectRatio defines how EnterUI handles a stable ratio box for images, previews, embeds, and media shells, including default structure, accessible states, and token-driven styling.

#Default usage

Aspect ratio

Children fill the ratio box without causing layout shift.

<AspectRatio ratio={16 / 9} className="docs-preview-media">
  <img src="/enterui-logo-square.png" alt="EnterUI mark" />
</AspectRatio>

#Import

import { AspectRatio } from "@froggdesign/enter-ui-react";

#Accessibility

AspectRatio does not add media semantics. Keep meaningful alt text on images and titles on embeds.

#API

• ratio defaults to 16 / 9.
• Accepts native div props, style, and className.

#Styling

Uses CSS aspect-ratio and .eui-aspect-ratio.