A imagem é exibida de forma diferente na visualização para dispositivos móveis e desktop

Por que a imagem é exibida de forma diferente no celular e no desktop?

O GemPages adapta automaticamente o layout da sua página para diferentes tamanhos de tela com base em um projeto ágil princípio. Aqui estão os motivos mais comuns para que sua imagem pareça diferente:

• Redimensionamento responsivo: As imagens são dimensionadas para caber em cada dispositivo. Isso pode alterar o tamanho, a proporção ou o corte de uma imagem.
• Configurações de visibilidade do dispositivo:Você pode ter definido a imagem para ser exibida somente no desktop, somente no celular ou em ambos.
• Layout personalizado para cada visualização: Você pode ter personalizado seções separadamente para dispositivos móveis ou desktop, o que pode gerar variações.

Como consertar este problema?

Veja como garantir que sua imagem pareça consistente em todos os dispositivos. Abra o Editor de GemPages painel e siga os passos rápidos abaixo:

Verifique as configurações de visibilidade

1. Clique no elemento de imagem.

2. Na barra lateral esquerda, vá para Avançado aba.

3. Vá até Exibir em.

4. Selecione os dispositivos corretos (Desktop, Tablet, Celular).

Ajuste o tamanho da imagem manualmente

1. Alterne para Exibição móvel usando o Seletor de Dispositivos.

2. Selecione o elemento de imagem.

3. Use os controles de dimensionamento e espaçamento para ajustar como a imagem aparece no celular.

4. Repita para tablet Ver se necessário.

Use o mesmo elemento de imagem em todos os dispositivos

Se você estiver usando o mesmo elemento de imagem para todos os dispositivos (Desktop, Tablet, Mobile), tenha em mente que:

• A imagem pode ser redimensionada or Cortado diferentemente dependendo do tamanho da tela.
• Margens, preenchimento ou layout de seção podem fazer com que a imagem se desloque ou estique.
• Em telas menores, a mesma imagem pode parecer muito grande ou perder o foco.

Para manter a consistência:

1. Selecione o elemento de imagem.

2. Utilizar a Comutador de dispositivos para visualizar como ele aparece em cada dispositivo

3. Ajuste configurações como Largura/Altura Máxima, Preenchimento/Margem e Ajuste ao Objeto

4. Aplique valores diferentes para cada dispositivo alternando o Ícone do dispositivo ao lado de cada configuração.

Carregue versões de imagens diferentes para cada dispositivo (opcional) 

Se uma imagem não funcionar bem em todos os dispositivos, tente esta abordagem:

1. Prepare várias versões da mesma imagem (por exemplo, otimizadas para desktop e celular).

2. Carregue cada versão como um elemento de imagem separado no seu layout.

3. Utilizar a Visibilidade configuração para mostrar/ocultar cada imagem com base no dispositivo.