Executando verificação de segurança...
Em resposta a [Não disponível]
1
Fernandoo

Uma das partes da solução é trabalhar com media query , ...e para cada resolução de tela ter a imagem tratada e adequada a resolução. Umas das ferramentas para redimensionar a imagem pode ser o photoshop.

Exemplo da media query:

@media screen and (min-width: 768px) {
  .titulo {
    font-size: 24px;
  }
}

/* Estilos para telas menores que 768px de largura */
@media screen and (max-width: 767px) {
  .titulo {
    font-size: 18px;
  }
}

Você pode adaptar a imagem desde a tela de um celular até um super monitor com uma resolução enorme. Vale pesquiser sobre o conceito " mobile first " que você começa desenvolvendo a tela para smartphones e vai evoluindo para telas de tablet's , desktops , monitores enormes como tv's.( aqui se encaixa a media query , que permite vc ter o site todo adapatado para cada tipo de aparelho).

Se tiver alguma dúvida , vc pode recorrer ao chat gpt , caso estiver com muita pressa.

Vc pode testar essas diferenças aplicadas , no console do seu navegador " Devtools" no Edge f12, através da emulação de dispositivos,( geralmente ícone do lado esquerdo superior da tela

Carregando publicação patrocinada...
1
CharlesMayer

Ok, pelo que entendi a media query serve como uma regra pra que determinado estilo seja aplicado conforme o tamanho da tela do dispositivo, certo? mas como posso usar isso para dimensionar para telas maiores?
Quando uso meu monitor normal a imagem fica certinha e pra tamanhos menores tbm, mas quando olho no monitor ultrawide eu perco um bom pedaço da imagem, pois o width fica muito grande.

1
Fernandoo
Autor
Autor

mas como posso usar isso para dimensionar para telas maiores?

Cada media query com determinada resolução você pode ter uma versão da mesma imagem para que ela se encaixe perfeitamente sem sofrer distorções, você vai inserir uma versão da imagem redimensionada adequadamente em editor de imagens ( ex. photoshop), para cada media query assim como a configuração do estilo "ex. width" fazendo com que cada resolução específica tenha a imagem adequada e o estilo adequado...

resumindo: é uma versão do site pra cada tipo de resolução ...

-um media query pra mobile
-um para desktop padrão
-e um para monitores e telas maiores

Se vc estiver com muita pressa da pra vc inserir todo seu css no chatgpt e solicitar media query para as resoluções que vc quiser, provavelmente ele te retornará com as versões solicitadas já configuradas e vc aprende só de bater o olho.

1