Olá, quando eu vou em inspecionar e aplico uma tela para tamanho de celular as imagens estavam normais, mas ao passar o projeto pra Vercel e abrir no celular as imagens estão estouradas. O que pode ser feito?
segue o link do projeto https://serenatto-cafe-opal.vercel.app/
Olá, Breno. Como vai?
Vamos procurar a melhor solução para o seu problema! Só não entendi o termo "estourada" significa que ela perdeu a qualidade ou que ficou com muito zoom?
Conferindo o seu projeto para telas de celular, me parece que as imagens dos banners(as imagens maiores), não se ajustam a proporção da tela e ficam com muito zoom e cortadas, seria isso?
Uma boa solução seria aplicar a propriedade object-fit para essas imagens com a propriedade mais adequada, tem esse artigo muito legal que pode te ajudar nisso. Outra solução poderia ser pegar imagens menores e substituir quando a tela estiver menor.
Me conta se consegui ajudar em sua dúvida por favor? Aguardo seu retorno.
Bons estudos!
Isso ela ficou com muito zoom. Dei uma olhada no artigo sobre object-fit e tentei aplicar, mas continuou na mesma.
Olá, Breno! Obrigado pelo seu retorno.
Eu baixei o projeto e testei, e realmente a propriedade object-fit não serviu para alterar o posicionamento da imagem. Fiz uma breve pesquisa pra entender o porque e descobri que o object-fit na realidade altera o posicionamento de elementos aplicados diretamente no HTML apenas. Como as imagens de banners estão aplicadas como background-image no CSS, sua utilização não causa efeito algum. Peço perdão pela troca, também aprendi um pouco tirando sua dúvida.
A melhor opção para limitar a largura da imagem dentro da section é alterar o valor do background-size: para 100% auto; . Isso fará com que a imagem ocupe 100% da largura da página e mantenha a proporção original de altura.
Entretanto, para aplicar responsividade essa não é a única solução, porque confere o resultado:
Fica um espaço em branco enorme entre as áreas acima e abaixo quando o layout fica com a largura pequena. Para resolver esse problema vejo duas soluções:
1- Usar a mesma imagem e mexer na proporção sua proporção, que foi a decisão tomada pela design nesse projeto 2- Utilizar várias imagens para serem substituídas conforme a largura do layout muda. Um exemplo disso é site de loja de carro, que geralmente tem um banner enorme no começo, trouxe esses dois exemplos. Se você testar a largura, vai reparar que são 3 imagens no total para a área do banner: -https://www.vw.com.br/pt.html -https://www.renault.com.br/ Tentar encaixar imagens em uma área pode ser trabalhoso e é mais simples substituir por imagens menores ou maiores mas isso geralmente é decisão da pessoa profissional de designer.
Espero ter ajudado. Bons estudos! :)
Se ficou com mais alguma dúvida, só falar!