> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-image.md). # AX - Bild ## Übersicht **AX - Bild** ist eine Experience-Cloud-Komponente, die Bilder auf Experience-Sites-Seiten mit Kontrolle über Größe, Zuschnitt, Ausrichtung und Ladeverhalten anzeigt. Verwenden Sie sie, um Produktfotos, Logos, Banner, Profilbilder oder andere visuelle Inhalte aus Salesforce Content-Dokumenten, statischen Ressourcen oder externen URLs anzuzeigen. Konfigurieren Sie in Experience Builder ohne Code, wie Bilder angezeigt, zugeschnitten und skaliert werden. Ideal für Produktgalerien, markenkonforme Header, visuelle Inhaltsbereiche, Profilanzeigen oder überall dort, wo Ihr Portal eine flexible Bilddarstellung mit responsiver Größenanpassung benötigt. ## Anleitungen | Name | Beschreibung | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | [**Richten Sie die Karte ein, um Details zu Datensätzen anzuzeigen**](/experience-cloud/experience-cloud-de/anleitungen/components/map/set-up-the-map-to-show-record-details-information.md) | Lernen Sie, wie Sie Datensätze in Experience Cloud mit Avonni Map anzeigen. | ## Einstellungen {% tabs %} {% tab title="🎛️ Eigenschaften" %} | Name | Beschreibung | Verwendung | | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **CMS-Bild oder Bild-URL** | Geben Sie die Quelle des Bildes an, entweder aus einem CMS oder direkt über eine Bild-URL. | Wählen Sie die Quelle, die am besten zu Ihren Bildverwaltungspräferenzen passt und einen einfachen Zugriff sowie einfache Aktualisierungen gewährleistet. | | **Breite & Höhe** | Bestimmen Sie die Breite und Höhe des angezeigten Bildes. | Legen Sie Abmessungen fest, die sicherstellen, dass das Bild harmonisch in das Seitenlayout passt und dabei seine Klarheit behält. | | **Position** | Passen Sie die Ausrichtung des Bildes an. | Richten Sie das Bild innerhalb seines Containers aus, um ein ausgewogenes und ästhetisch ansprechendes Seitenlayout beizubehalten. | | **Statisches Bild** | Option, das Bild als statisch festzulegen. | Verwenden Sie diese Einstellung, wenn das Bild keine responsiven Anpassungen benötigt und über verschiedene Bildschirmgrößen hinweg unverändert bleibt. | | **Fließend & Fließend wachsen** | Diese Optionen ermöglichen es dem Bild, seine Größe responsiv anzupassen. | Aktivieren Sie diese Einstellungen, damit sich Bilder nahtlos an verschiedene Bildschirmgrößen anpassen und so die Responsivität der Webseite verbessern. | | **Miniaturansicht** | Zeigen Sie das Bild als Miniaturansicht an. | Verwenden Sie diese Option, um das Bild in kompakter Form darzustellen, geeignet für Galerien oder als Vorschau. | | **Verzögertes Laden** | Wählen Sie zwischen automatischem Laden oder verzögertem Laden des Bildes. | Optimieren Sie die Seitenladezeiten, indem Sie eine Lademethode wählen, die sofortige Sichtbarkeit und die gesamte Seitenleistung in Einklang bringt. | | **Zuschneidegröße, Zuschnittanpassung, X- und Y-Zuschneideposition** | Passen Sie den Bildzuschnitt an, um sich auf relevante Bereiche zu konzentrieren. | Definieren Sie Zuschnittsparameter, damit das Bild wichtige Bereiche deutlich hervorhebt und die visuelle Kommunikation verbessert. | | **Vergrößerungstyp** | Wählen Sie den Vergrößerungsstil aus, der beim Anzeigen von Bilddetails angewendet werden soll. | Verbessern Sie die Benutzerinteraktion, indem Sie einen Vergrößerungstyp wählen, der eine detaillierte Betrachtung des Bildes ermöglicht. | | **CMS-Vergleichsbild oder Vergleichs-URL** | Passen Sie die Attribute der Vergleichsfunktion an. | Verfeinern Sie die Vergleichsfunktion mit Attributen, die Ausrichtung, Interaktion und Beschriftung festlegen und so eine benutzerfreundliche Vergleichserfahrung gewährleisten. | | **Vergleichsattribute** | Definieren Sie die Details der Vergrößerungsfunktion. | Passen Sie das Verhalten und Erscheinungsbild des Vergrößerungswerkzeugs an, damit Benutzer Bilddetails leicht erkunden können. | | **Vergrößerungsattribute** | Passen Sie die Rundung der Bildecken an. | Runden oder kantiger machen Sie die Bildecken mithilfe eines geeigneten Rahmenradius und tragen Sie so zur stilistischen Darstellung des Bildes bei. | | {% endtab %} | | | {% tab title="🎨 Gestaltung" %} {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-image.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.