# AX - Bild

## Übersicht

**AX - Bild** ist eine Experience Cloud-Komponente, die Bilder auf Experience-Sites-Seiten anzeigt und dabei Kontrolle über Größe, Zuschnitt, Ausrichtung und Ladeverhalten bietet.

Verwenden Sie sie, um Produktfotos, Logos, Banner, Profilbilder oder beliebige visuelle Inhalte aus Salesforce Content Documents, statischen Ressourcen oder externen URLs anzuzeigen. Konfigurieren Sie in Experience Builder ohne Code, wie Bilder angezeigt, zugeschnitten und skaliert werden.

Perfekt für Produktgalerien, markenbezogene Kopfzeilen, Abschnitte mit visuellen Inhalten, Profilanzeigen oder überall dort, wo Ihr Portal eine flexible Bilddarstellung mit responsiver Größenanpassung benötigt.

## Tutorials

| Name                                                                                                                                                                                                                                             | Beschreibung                                                                  |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------- |
| [**Richten Sie die Karte ein, um Datensatzdetailinformationen anzuzeigen**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/tutorials/komponenten/karte-1/die-karte-so-einrichten-dass-datensatzdetails-angezeigt-werden) | Erfahren 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 Bildquelle an, entweder aus einem CMS oder direkt über eine Bild-URL.             | Wählen Sie die Quelle, die Ihren Anforderungen an die Bildverwaltung am besten entspricht und einen einfachen Zugriff sowie Aktualisierungen gewährleistet.                     |
| **Breite und 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 erfordert und über verschiedene Bildschirmgrößen hinweg unverändert bleibt.                        |
| **Fluid & Fluid Grow**                                             | Diese Optionen ermöglichen es dem Bild, seine Größe responsiv anzupassen.                       | Aktivieren Sie diese Einstellungen, damit sich Bilder reibungslos an unterschiedliche Bildschirmgrößen anpassen und die Responsivität der Webseite verbessert wird.             |
| **Miniaturansicht**                                                | Zeigt das Bild als Miniaturansicht an.                                                          | Nutzen Sie diese Option, um das Bild in kompakter Form darzustellen, geeignet für Galerien oder als Vorschau.                                                                   |
| **Lazy Loading**                                                   | Wählen Sie zwischen automatischem oder verzögertem Laden des Bildes.                            | Optimieren Sie die Ladezeiten der Seite, indem Sie eine Lademethode wählen, die unmittelbare Sichtbarkeit und die Gesamtleistung der Seite ausbalanciert.                       |
| **Zuschneidegröße, Zuschnitt-Anpassung, Zuschnitt-Position X & Y** | Passen Sie den Bildzuschnitt an, um relevante Bereiche hervorzuheben.                           | Definieren Sie Zuschneideparameter, um sicherzustellen, dass das Bild wichtige Bereiche deutlich anzeigt und so 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 ein benutzerfreundliches Vergleichserlebnis gewährleisten. |
| **Vergleichsattribute**                                            | Definieren Sie die Details der Vergrößerungsfunktion.                                           | Passen Sie das Verhalten und das Erscheinungsbild des Vergrößerers an, damit Benutzer Bilddetails einfach erkunden können.                                                      |
| **Vergrößerungsattribute**                                         | Passen Sie die Rundung der Bildecken an.                                                        | Mildern oder schärfen Sie die Bildecken, indem Sie einen geeigneten Rahmenradius festlegen, was zur stilistischen Darstellung des Bildes beiträgt.                              |
| {% endtab %}                                                       |                                                                                                 |                                                                                                                                                                                 |

{% tab title="🎨 Gestaltung" %}

{% endtab %}
{% endtabs %}