mittwald Flow Logo

Components

Image

Mit der Image-Component lassen sich Bilder in der Benutzeroberfläche einbinden.GitHub
mittwald

Playground

In <Image /> wird über die Property src die Bildquelle festgelegt. Mithilfe weiterer Properties wie width und height lässt sich dessen Größe individuell anpassen.

mittwald
import { Image } from "@mittwald/flow-react-components";

<Image
  src="https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg"
  alt="mittwald"
  width={200}
/>

Responsive Images

Um Bilder in unterschiedlichen Auflösungen für verschiedene Bildschirmgrößen bereitzustellen, eignet sich das srcSet-Attribut. Damit lassen sich mehrere Varianten einer Bilddatei hinterlegen – sowohl in niedriger als auch in hoher Auflösung –, die je nach Pixeldichte des Endgeräts automatisch ausgewählt werden. Weitere Informationen dazu finden sich im folgenden Artikel: Responsive Images.

Border

Mit der Property withBorder erhält die Image-Component eine Border. Dieser ist insbesondere bei Bildern mit geringem Kontrast zum Hintergrund von Vorteil, da er die visuelle Abgrenzung verbessert und die Bildwahrnehmung unterstützt.

mittwald
import { Image } from "@mittwald/flow-react-components";

<Image
  src="https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg"
  alt="mittwald"
  width={200}
  withBorder
/>

Fixes Seitenverhältnis

Die Property aspectRatio definiert das Seitenverhältnis der Image-Component. Weicht das Seitenverhältnis des eingebetteten Bildes ab – etwa durch eine größere Höhe oder Breite –, wird das Bild zentriert, und überstehende Bereiche außerhalb des festgelegten Verhältnisses werden ausgeblendet.

mittwald
import { Image } from "@mittwald/flow-react-components";

<Image
  src="https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg"
  alt="mittwald"
  width={200}
  aspectRatio={16 / 9}
  withBorder
/>

Overview