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

Fotos esticadas

Como evitar que as fotos se estiquem/encurtem e percam a proporção quando estamos fazendo a responsividade?

2 respostas
solução!

pra ela estar esticando e encurtando você deve estar colocando o tamanho em porcentagem, coloca em px... e pra fazer uma boa responsividade é bom ter arquivos diferentes da mesma imagem com tamanhos diferentes

<picture>
            <source media="(max-width: 600px)" srcset="imagens/dan-droids-pq.png" type="image/png">
            <img src="imagens/dan-droids.png" alt="Primeiro mascote do Android">
        </picture>

nesse exemplo está chamando 2 arquivos diferentes, um pequeno para telas de até 600px na tag source e outro de tamanho maior para telas maiores na tag img

https://jonasnunes.github.io/html-css/exemplos/projeto-android/android.html

confere só nesse link e veja quando a tela atinge 600px a imagem muda

Entendi. Devo usar dois arquivos de imagem sendo chamados em função do tamanho de tela. Tamanho em porcentagem. Muito obrigado Jonas.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software