Ir al contenido

Ancho máximo de imagen

Define cuánto pueden ocupar las imágenes, desde una visualización compacta hasta el ancho completo del contenedor.

Este grupo de ajustes controla el ancho máximo de una imagen allí donde esta opción está disponible. Úsalo para mantener las imágenes discretas, darles más peso visual o permitir que se expandan para ocupar el espacio disponible. Si estás ajustando esto en el editor de temas, consulta documentación de Shopify sobre la personalización de temas. Para obtener una visión general más amplia de cómo las secciones y los bloques del tema usan los ajustes, consulta documentación de Shopify sobre secciones y bloques

Elige un ancho menor cuando la imagen complemente el contenido cercano en lugar de liderarlo. Esto funciona bien para logotipos, iconos, insignias y otros elementos visuales que deben mantenerse proporcionales al texto circundante.

Aumenta el ancho cuando la imagen necesite más presencia, como ilustraciones destacadas, imágenes editoriales u otro contenido que deba sobresalir más en el diseño. Un ajuste más ancho puede hacer que la imagen parezca más intencional sin cambiar el resto del contenido.

Establecer el valor en 0 elimina el límite de ancho y permite que la imagen se extienda por todo el ancho disponible de su contenedor.

El estiramiento a ancho completo usa solo el espacio disponible en el diseño circundante. No forzará la imagen a ir más allá del ancho de su contenedor.

Empieza por decidir si la imagen es decorativa, de apoyo o el foco principal. Las imágenes de apoyo suelen verse mejor con un ancho modesto, mientras que las imágenes focales a menudo se benefician de más espacio.

Si este ajuste aparece en distintas partes del tema, ajústalo para cada caso de uso en lugar de basarte en un único estándar visual en todas partes. El ancho de imagen adecuado depende de la cantidad de espacio circundante y de cuán destacada deba verse la imagen.

Los anchos de imagen mayores hacen que las imágenes de origen de baja calidad resulten más evidentes. Si una imagen se ve suave, recortada de forma extraña o demasiado dominante, reduce el ancho antes de cambiar otros ajustes de diseño.

Comprueba también la relación entre la imagen y el texto o las acciones cercanas. Una imagen demasiado grande puede desplazar el contenido importante hacia abajo o hacer que un área de contenido se vea desequilibrada.

  1. Coincide con el papel de la imagen. Usa anchos más pequeños para imágenes de apoyo y anchos mayores para imágenes que deban liderar el contenido.
  2. Usa el ancho completo con intención. Establece el valor en 0 solo cuando el diseño tenga suficiente espacio y la imagen siga viéndose nítida a ese tamaño.
  3. Comprueba el equilibrio del contenido. Asegúrate de que una imagen más ancha no eclipse los encabezados, el texto o las llamadas a la acción cercanos.
  4. Ajusta según la ubicación. Revisa este ajuste en cada contexto en el que aparezca, ya que el mejor ancho depende del espacio disponible.
  5. Revisa ambos viewports. Los controles de escritorio y móvil pueden comportarse de forma diferente, así que comprueba la imagen en ambos tamaños de pantalla antes de publicar.
  6. Compara las opciones de medios. Si el escritorio y el móvil usan distintos medios, confirma que el recorte, la carga, el comportamiento alternativo y la legibilidad siguen funcionando bien en ambas vistas.