Images
Image is a styled <img> with opt-in helpers for
responsive scaling, a thumbnail frame, and rounded corners. It forwards every native
image attribute, so src, alt, srcSet,
loading, and the rest pass straight through.
Import
import { Image } from '@metatoy/bootstrap-styled';Fluid, thumbnail & rounded
fluid makes the image scale down to its container (max-width: 100%; height: auto).
thumbnail adds a padded, bordered, rounded frame. rounded rounds the corners with
--bs-border-radius.
Alignment
Image passes native attributes through, so you align it exactly as you would a plain
<img> — with a style, a utility class, or float. Center a block image with
display: block; margin: 0 auto, or float it to a side.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| fluid | boolean | — | `.img-fluid` — max-width: 100%; height: auto (responsive). |
| thumbnail | boolean | — | `.img-thumbnail` — bordered, padded, rounded thumbnail frame. |
| rounded | boolean | — | `.rounded` — rounded corners. |
Image also accepts all native <img> attributes (src, alt, srcSet, sizes,
width, height, loading, decoding, …).
Theming
thumbnail and rounded read the shared shape and surface tokens: --bs-border-radius
for the corner radius, --bs-border-width and --bs-border-color for the thumbnail
frame, and --bs-body-bg for the thumbnail’s padding fill. Overriding those tokens — on a
theme or a scoped subtree — reshapes and recolors the frame without touching the
component.
Accessibility
Always provide a meaningful alt describing the image’s content or purpose; use alt=""
for purely decorative images so assistive tech skips them. Set width and height (or an
aspect ratio) to reserve layout space and avoid content shift. When an image conveys
information also present in nearby text, keep the alt concise to avoid redundancy.
Explore in Ladle
Browse the image helpers in the interactive component gallery: Open in Ladle.