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.
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.
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.