AspectRatio

Use AspectRatio

AspectRatio is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, AspectRatio, Image } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <AspectRatio ratio={16 / 9}><Image src="/flood-mark.png" alt="Flood logo" fit="contain" /></AspectRatio>
    </FloodRoot>
  );
}

Design notes

• ratio must be finite and positive. The root reserves media geometry before image loading.
• Direct img/video/iframe children fill the reserved box. Content can overflow; the component does not clip focus, menus or arbitrarily tall text.
• Host media owns alt, captions, controls and loading. Native props/ref target the outer div.
• Available in 0.2.4; use matching installed declarations.

API reference