AspectRatio
Reserve media space before it arrives, keeping the surrounding reading rhythm steady.
Live — this one is real
Usage
import { AspectRatio } from "mizu-ui";
export function Example() {
return (
<AspectRatio ratio={2}>
<img src="/images/field.svg" alt="A diamond measurement field" />
</AspectRatio>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect layout/Layout.tsx
Source is included in the npm package under src/layout/Layout.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ratio | number | 16 / 9 | Width divided by height. |
| children / ...props | ReactNode / HTMLAttributes | — | Native wrapper and media. |
Accessibility
CSS aspect-ratio reserves space; invalid ratios fall back to a square. Content retains its own accessibility.
Motion
Static geometry.