# Image Mit der Image-Component lassen sich Bilder in der Benutzeroberfläche einbinden. ## Overview # Playground In `` wird über die Property `src` die Bildquelle festgelegt. Mithilfe weiterer Properties wie `width` und `height` lässt sich dessen Größe individuell anpassen. ```tsx import { Image } from "@mittwald/flow-react-components"; mittwald ``` --- # 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](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_same_size_different_resolutions:~:text=Resolution%20switching%3A%20Same%20size%2C%20different%20resolutions). --- # 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. ```tsx import { Image } from "@mittwald/flow-react-components"; mittwald ``` --- # 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. ```tsx import { Image } from "@mittwald/flow-react-components"; mittwald ```