Cuando usas una imagen en layouts donde el área es fija (Banner con altura definida, Fondo, Dividido), la imagen necesita ajustarse al área. Dependiendo de la proporción de la imagen frente a la pantalla, partes pueden quedar recortadas. Para que no pierdas el control sobre esta adaptación, Yay! Forms ofrece dos controles:
- Ajuste de imagen — define cómo la imagen se ajusta al área.
- Punto focal — define qué parte de la imagen debe permanecer siempre visible.
Ajuste de imagen
En la barra lateral derecha de la Pregunta, debajo de las opciones de layout, encontrarás el selector Ajuste de imagen con tres opciones:
- Ajustar — la imagen aparece entera dentro del área. Puede sobrar espacio alrededor (franjas blancas/coloreadas), pero nada se recorta. Ideal para logos e ilustraciones donde no se puede perder ningún detalle.
- Cubrir — la imagen llena toda el área, recortando los bordes si es necesario para mantener la proporción. Es el valor por defecto para fotos e ilustraciones de fondo.
- Estirar — la imagen se deforma (pierde la proporción) para llenar exactamente el área. Úsalo solo si la imagen es un patrón/textura o si la distorsión no importa.
El selector Ajuste de imagen solo aparece cuando el layout tiene un área fija: Banner con altura explícita, Fondo (Full) o Dividido (Split). En layouts con altura "auto" o Lateral (Float), el ajuste sería inerte y por eso el selector no se muestra.
Punto focal
Cuando el Ajuste de imagen es Ajustar o Cubrir, el selector de Punto focal queda disponible. Define qué región de la imagen debe permanecer visible incluso cuando el dispositivo se redimensiona y parte de la imagen necesita ser recortada.
Para configurar:
- En una imagen con Ajuste Ajustar o Cubrir, desplaza la barra lateral hasta el área de Punto focal.
- Haz clic o arrastra el punto sobre la miniatura de la imagen para elegir la región que siempre debe aparecer (ej: el rostro de la persona, el producto, el título).
- Para eliminar el punto y volver al centro (50%/50%), haz clic en Reset.
El punto focal no tiene efecto cuando el ajuste es Estirar (la imagen se deforma uniformemente, sin recortes). Por eso, el selector desaparece automáticamente cuando eliges Estirar.
Combinando con personalización por dispositivo
El Ajuste de imagen y el Punto focal también son configurables por dispositivo. Por ejemplo:
- En Desktop: usar Cubrir con punto focal en el rostro de la persona.
- En Móvil: cambiar a Ajustar con punto focal central, garantizando que la imagen entera aparezca incluso en una pantalla vertical estrecha.
Aprende más en Cómo personalizar el layout del formulario por dispositivo.
Buenas prácticas
- Ajustar es mejor cuando la imagen tiene texto o logo importante (no se recorta nada).
- Cubrir con punto focal definido es mejor para fotos profesionales (llena todo y mantiene el sujeto enmarcado).
- Siempre prueba el resultado empezando por Móvil (que tiende a concentrar la mayoría de las respuestas) y luego verifica en Tablet y Desktop, cambiando la pestaña encima del lienzo.
- Evita Estirar con fotos — solo úsalo para texturas y patrones.
Recursos relacionados
Soporte
Si tienes alguna duda o sugerencia, envía un correo a [email protected]
Conclusión
Con Ajuste de imagen y Punto focal, ganas control preciso sobre cómo se comportan tus imágenes en pantallas de proporciones diferentes. Usa Ajustar para preservar la imagen entera; usa Cubrir con punto focal para fotos profesionales que necesitan llenar el área sin perder el sujeto principal.