# AX - Imagen ## Descripción general **AX - Imagen** es un componente de Experience Cloud que muestra imágenes en páginas de Experience Sites con control sobre el tamaño, el recorte, la alineación y el comportamiento de carga. Úsalo para mostrar fotos de productos, logotipos, banners, fotos de perfil o cualquier contenido visual de Salesforce Content Documents, recursos estáticos o URL externas. Configura cómo se muestran, recortan y escalan las imágenes en Experience Builder sin código. Perfecto para galerías de productos, encabezados de marca, secciones de contenido visual, vistas de perfil o cualquier lugar donde tu portal necesite una presentación de imágenes flexible con tamaño responsivo. ## Tutoriales | Name | Descripción | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | | [**Configura el mapa para mostrar la información de detalles del registro**](/experience-cloud/experience-cloud-es/tutoriales/componentes/mapa/configurar-el-mapa-para-mostrar-informacion-de-detalles-del-registro.md) | Aprende a mostrar registros en Experience Cloud usando Avonni Map. | ## Configuración {% tabs %} {% tab title="🎛️ Propiedades" %} | Name | Descripción | Uso | | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Imagen de CMS o URL de imagen** | Especifica el origen de la imagen, ya sea desde un CMS o directamente mediante una URL de imagen. | Selecciona la fuente que mejor se adapte a tus preferencias de gestión de imágenes y garantice un acceso y actualizaciones sencillos. | | **Ancho y alto** | Determina el ancho y el alto de la imagen mostrada. | Define dimensiones que garanticen que la imagen encaje armoniosamente dentro del diseño de la página mientras mantiene su claridad. | | **Posición** | Ajusta la alineación de la imagen. | Alinea la imagen dentro de su contenedor para mantener un diseño de página equilibrado y estéticamente agradable. | | **Imagen estática** | Opción para establecer la imagen como estática. | Usa este ajuste cuando la imagen no requiera adaptaciones responsivas y se mantenga constante en distintos tamaños de pantalla. | | **Fluido y crecimiento fluido** | Estas opciones permiten que la imagen ajuste su tamaño de forma responsiva. | Activa estos ajustes para que las imágenes se adapten suavemente a distintos tamaños de pantalla, mejorando la capacidad de respuesta de la página web. | | **Miniatura** | Mostrar la imagen como una miniatura. | Utiliza esta opción para presentar la imagen en un formato compacto, adecuado para galerías o como vista previa. | | **Carga diferida** | Elige entre carga automática o carga diferida de la imagen. | Optimiza los tiempos de carga de la página seleccionando un método de carga que equilibre la visibilidad inmediata y el rendimiento general de la página. | | **Tamaño de recorte, ajuste del recorte, posición de recorte X e Y** | Personaliza el recorte de la imagen para centrarte en las partes relevantes. | Define los parámetros de recorte para garantizar que la imagen muestre de forma destacada las áreas esenciales, mejorando la comunicación visual. | | **Tipo de lupa** | Selecciona el estilo de ampliación que se aplicará al ver los detalles de la imagen. | Mejora la interacción del usuario eligiendo un tipo de lupa que permita explorar la imagen en detalle. | | **Imagen de comparación de CMS o URL de comparación** | Personaliza los atributos de la función de comparación. | Perfecciona la funcionalidad de comparación con atributos que determinen la orientación, la interacción y las etiquetas, garantizando una experiencia de comparación fácil de usar. | | **Atributos de comparación** | Define los detalles de la función de ampliación. | Personaliza el comportamiento y la apariencia de la lupa para garantizar que los usuarios puedan explorar fácilmente los detalles de la imagen. | | **Atributos de la lupa** | Ajusta el redondeo de las esquinas de la imagen. | Suaviza o afila las esquinas de la imagen configurando un radio de borde adecuado, contribuyendo a la presentación estilística de la imagen. | | {% endtab %} | | | {% tab title="🎨 Estilo" %} {% endtab %} {% endtabs %} --- # Agent Instructions: 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-es/experience-components/ax-imagen.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.