BricksLab Catalog

@brickslab/ui-web

Composant d'image avec contrôle du redimensionnement (objectFit), du rayon de bordure et des dimensions. Adapté aux vignettes, bannières, avatars et galeries.

Aperçu

objectFit

objectFit="cover" Démonstration objectFit cover

objectFit="contain" Démonstration objectFit contain

objectFit="fill" Démonstration objectFit fill

borderRadius

borderRadius="var(--radius-md)" (défaut) Coins arrondis medium

borderRadius="var(--radius-xl)" Coins très arrondis

borderRadius="50%" Image circulaire

Props

Prop	Type	Défaut	Requis	Description
`src`	`string`	—	✓	URL de l'image à afficher.
`alt`	`string`	—	✓	Texte alternatif pour l'accessibilité (attribut alt).
`width`	`number \| string`	—	—	Largeur de l'image. Accepte une valeur en pixels (number) ou une valeur CSS (string).
`height`	`number \| string`	—	—	Hauteur de l'image. Accepte une valeur en pixels (number) ou une valeur CSS (string).
`objectFit`	`"cover" \| "contain" \| "fill" \| "none"`	`"cover"`	—	Mode de redimensionnement de l'image dans son conteneur.
`borderRadius`	`string`	`"var(--radius-md)"`	—	Rayon de bordure de l'image. Accepte toute valeur CSS valide.

Utilisation

tsx

import { MediaImage } from "@brickslab/ui-web";

// Image simple
<MediaImage
  src="https://picsum.photos/400/300"
  alt="Image de démonstration"
  width={400}
  height={300}
/>

// objectFit: contain (pour logos ou images avec fond transparent)
<MediaImage
  src="https://picsum.photos/400/300?random=2"
  alt="Image en contain"
  width={400}
  height={200}
  objectFit="contain"
/>

// Coins arrondis personnalisés
<MediaImage
  src="https://picsum.photos/400/300?random=3"
  alt="Image avec coins ronds"
  width={400}
  height={300}
  borderRadius="var(--radius-xl)"
/>

// Image pleine largeur
<MediaImage
  src="https://picsum.photos/800/400?random=4"
  alt="Bannière"
  width="100%"
  height={200}
  objectFit="cover"
/>