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
- 1Proporcione a las imágenes ancho máximo: 100% y alto: automático.
- 2Especifique el ancho y el alto en HTML para la estabilidad del diseño (CLS), pero limítelos en CSS.
- 3Para varios tamaños, considere srcset / <picture>.
- 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