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

Imagem distorcida

Criei o repositoio no github e implantei no vercel, porem quando abro no celular ou no meu ipad, a imagem fica esticada, tanto para o projeto que eu fiz com minha foto, como para o projeto final da alura, realizei todas as etapas do curso, inclusive upei para o vercel o proprio projeto final disponibilizado pela alura e mesmo assim a imagem da joana santos fica esticada no meu celular. Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidadealguem pode me ajudar?

4 respostas

Olá Fernanda, tudo bem?

O problema com a imagem esticada pode estar relacionado à definição de largura e altura da imagem no seu código HTML ou CSS. Se a largura e a altura da imagem forem definidas de maneira rígida, ela pode aparecer esticada em diferentes dispositivos com tamanhos de tela diferentes.

Um forma de tentar corrigir isso, você pode tentar definir a largura da imagem em termos percentuais ou em relação à largura da tela. Por exemplo, em CSS, você pode definir a largura da imagem como:

img {
  width: 100%;
  height: auto;
}

Contudo o será necessário ter acesso ao seu código-fonte para lhe auxiliar de forma mais assertiva. Existem duas maneiras de compartilhar seu código conosco: através do GitHub ou de um arquivo .zip que você pode enviar para nós por meio do Google Drive ou de outro serviço de armazenamento em nuvem.

Fico no aguardo e a disposição para lhe auxilia-lo.

Sucesso

Um grande abraço e até mais!

Boa tarde Victor, tudo bem? https://github.com/FernandaAvanco/portifolio aqui esta o link para o meu código do projeto no GitHub, desde já, agradeço pela rápida ajuda, porém ainda não consegui resolver o problema, a imagem fica esticada aparentemente apenas no navegador safari, para iphones e ipads, testei em outros dispositivos mobiles e a responsividade está funcionando normalmente, assim como na developer tools do meu navegador aqui no PC, se você conseguir me ajudar novamente de alguma forma, obrigada de verdade!

Segue também o link do meu projeto publicado com o Vercel https://portifolio-fernandaavanco.vercel.app

solução!

Olá Fernanda, tudo bem?

Peço desculpas pela demora em obter uma resposta

Fiz alguns testes utilizando o aparelho iphone 11, e de fato, a foto fica esticada como relata por ti, por conta do meu aparelho ser diferente do seu peço que por conta disso peço que altere para os valores que mais se adequem aos seus aparelhos

Na class do @media (max-width : 1200px) em .apresentacao__foto-dev, podemos "travar" um valor a fim de que a foto fique mais "quadrada", mais é claro fique a vontade para modificar esses valores, seu código fica assim:


@media (max-width : 1200px){
================== Outra parte do código mais acima  ==============================
 .apresentacao__foto-dev {
        width: 200px;
        height: 200px;
    }
    }

Fazendo essas alterações obtemos o seguinte resultado:

Imagem do portifólio da aluna, para exemplificar como ficou

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Oi Victor, por aqui deu tudo certo, consegui alterar os valores como vc explicou e a imagem ficou ótima nos iphones e nos outros aparelhos também, muito obrigada pela atenção e por ter solucionado minha dúvida!

Até mais!