# Image

A native responsive image with explicit alternative text and media fitting.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <Image src="/flood-mark.png" alt="Flood logo" width={160} height={160} fit="contain" />
    </FloodRoot>
  );
}
```

## Design notes

- alt is required; an empty string is appropriate for decorative imagery beside equivalent visible content.
- Native src/srcSet/sizes/loading/decoding/dimensions, handlers and HTMLImageElement ref are preserved. Supply width/height or AspectRatio to reserve geometry.
- fit cover/contain changes object-fit, not fetching, optimization or fallback behavior. Avatar composes Image with its own load/fallback lifecycle.
- Available in 0.2.4; use matching installed declarations.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `alt` | `string` | `Required` |
| `fit` | `"cover" \| "contain"` | `"cover"` |
| `Native HTML props` | `Omit<ImgHTMLAttributes<HTMLImageElement>, "alt">` | `Forwarded` |