Quando você usa uma imagem em layouts onde a área é fixa (Banner com altura definida, Plano de fundo, Dividido), a imagem precisa ser ajustada à área. Dependendo da proporção da imagem versus a tela, partes podem ser cortadas. Para você não perder o controle sobre essa adaptação, o Yay! Forms oferece dois controles:
- Ajuste da imagem — define como a imagem se encaixa na área.
- Ponto focal — define qual parte da imagem deve permanecer sempre visível.
Ajuste da imagem
Na barra lateral direita da Questão, abaixo das opções de layout, você encontra o seletor Ajuste da imagem com três opções:
- Encaixar — a imagem aparece inteira dentro da área. Pode sobrar espaço em volta (faixas brancas/coloridas), mas nada é cortado. Ideal para logos e ilustrações onde nenhum detalhe pode ser perdido.
- Preencher — a imagem preenche toda a área, cortando as bordas se necessário para manter a proporção. É o padrão para fotos e ilustrações em fundo.
- Esticar — a imagem é deformada (perde a proporção) para preencher exatamente a área. Use somente se a imagem for um padrão/textura ou se a distorção não importar.
Ponto focal
Quando o Ajuste da imagem é Encaixar ou Preencher, fica disponível o seletor de Ponto focal. Ele define qual região da imagem deve permanecer visível mesmo quando o dispositivo é redimensionado e parte da imagem precisa ser cortada.
Para configurar:
- Em uma imagem com Ajuste Encaixar ou Preencher, role a barra lateral até a área de Ponto focal.
- Clique ou arraste o ponto sobre a miniatura da imagem para escolher a região que sempre deve aparecer (ex: o rosto da pessoa, o produto, o título da peça).
- Para remover o ponto e voltar para o centro (50%/50%), clique em Resetar.
Combinando com personalização por dispositivo
O Ajuste da imagem e o Ponto focal também são configuráveis por dispositivo. Por exemplo:
- No Desktop: usar Preencher com ponto focal no rosto da pessoa.
- No Celular: trocar para Encaixar com ponto focal central, garantindo que a imagem inteira apareça mesmo numa tela vertical estreita.
Saiba mais em Como personalizar o layout do formulário por dispositivo.
Boas práticas
- Encaixar é melhor quando a imagem tem texto ou logo importante (não corta nada).
- Preencher com ponto focal definido é melhor para fotos profissionais (preenche tudo e mantém o assunto enquadrado).
- Sempre teste o resultado começando pelo Celular (que tende a concentrar a maior parte das respostas) e depois confira no Tablet e no Desktop, trocando a aba acima do canvas.
- Evite Esticar com fotos — só use com texturas e padrões.
Recursos relacionados
- Como personalizar o layout do formulário por dispositivo
- Como alterar o posicionamento da sua imagem
Suporte
Se você tiver alguma dúvida ou sugestão, envie um e-mail para help@yayforms.com
Conclusão
Com Ajuste da imagem e Ponto focal, você passa a ter controle preciso sobre como suas imagens se comportam em telas de proporções diferentes. Use Encaixar para preservar a imagem inteira; use Preencher com ponto focal para fotos profissionais que precisam preencher a área sem perder o assunto principal.