Error de conexión. Inténtalo de nuevo.

Saltar al contenido
SEO Tools
Ayuda y documentación
UX / UI Impacto medio Fácil 10 a 20 minutos

Imágenes responsivas

Las imágenes deben caber en el móvil sin desplazamiento horizontal.

Qué es

Una imagen con un ancho grande fijo (por ejemplo, ancho="1200") puede desbordarse de la pantalla en un móvil estrecho y provocar el desplazamiento horizontal de toda la página.

Por qué importa

El desplazamiento horizontal es uno de los problemas de UX más molestos en dispositivos móviles: rompe el diseño y parece inacabado. Se previene fácilmente con una única regla CSS.

Cómo hacerlo

  1. 1Proporcione a las imágenes ancho máximo: 100% y alto: automático.
  2. 2Especifique el ancho y el alto en HTML para la estabilidad del diseño (CLS), pero limítelos en CSS.
  3. 3Para varios tamaños, considere srcset / <picture>.
  4. 4Pruebe con un ancho estrecho (~360 px) para asegurarse de que nada se desplace horizontalmente.

Ejemplo

Correcto
imagen { max-width: 100%; height: auto; }

Conclusión

Una sola regla (ancho máximo: 100%; alto: automático) resuelve la mayoría de los desbordamientos de imágenes en dispositivos móviles. Agregue dimensiones en HTML para CLS y, para elementos visuales grandes, considere srcset. Una solución rápida para una dolencia móvil común.

Temas relacionados