Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Imagem Hero em monitor ultrawide.

Olá, estou com um problema na imagem do hero. Tenho um monitor ultrawide com resolução de 3440x1440 e, por causa disso, a imagem fica com um zoom muito forte e acaba cortando demais.

Consegui ajustar o texto, os menus e o logo do header, mas a imagem está complicada.

Qual seria a melhor forma de ajustar isso para telas grandes sem deixar a imagem esticada ou com zoom exagerado? Seria melhor usar outra imagem específica para ultrawide ou existe alguma boa prática para esse caso? Cover não seria uma boa estratégia imagino.

No print parece estar muito melhor hahaha.

Print da tela da construção do site jornada viagens com a imagem hero esticada e zoom exagerado

2 respostas
solução!

Olá, Matheus.
Uma boa prática é utilizar imagens com resoluções e proporções diferentes para cada tipo de tela, carregando automaticamente a versão mais adequada conforme o tamanho ou aspect ratio do dispositivo.
Exemplo:

.hero {
  background-image: url(hero-desktop.jpg);
}

@media (min-aspect-ratio: 21/9) {
  .hero {
    background-image: url(hero-ultrawide.jpg);
  }
}

Evite:

  • usar uma única imagem para todos os formatos;
  • deixar o hero ocupando infinitamente 100vw;
  • posicionar conteúdos importantes próximos às bordas.

Prefira:

  • imagens específicas para diferentes aspect ratios;
  • usar clamp() para controlar a altura;
  • manter uma “safe area” central para o conteúdo;
  • definir limite de largura;
  • trabalhar com composição em camadas.

Para monitores ultrawide, o ideal geralmente é criar uma arte específica, pois isso proporciona um resultado mais profissional e consistente.
Além disso, faça testes em diferentes resoluções até encontrar o melhor ajuste.
As ferramentas de desenvolvedor do navegador (modo responsivo/ícone de tela) ajudam bastante nesse processo.
Teste ai e avise alguma duvida.
Bons estudos.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Muito obrigado! Utilizei o Upscayl e, enfim, o resultado ficou excelente. No curso ainda não foram demonstrados o clamp e outras ferramentas para controlar melhor a imagem, mas foi muito interessante já ter essa primeira experiência. Ficou muito bom.