Porque as imagens da sessão receita ficam distorcidas (esticadas) quando vamos diminuindo a tela para o tamanho mobile?
Solucionado
Porque as imagens da sessão receita ficam distorcidas (esticadas) quando vamos diminuindo a tela para o tamanho mobile?
Oi Laiara, tudo bem?
Isso acontece porque a altura das imagens da receita estão colocadas como 200px. Ou seja, a altura vai ser 200px (fixo) não importa o tamanho da tela.
Para resolver isso, podemos usar porcentagem (%), uma boa prática para tornar mais responsivo, por exemplo:
.receita__imagem {
height: 100%;
width: 100%;
}Agora a altura/largura vão ter 100% do espaço disponível, olha só:
Portanto, não fica mais distorcido quando diminuímos a tela! Espero ter ajudado, bons estudos!
Obrigada Giovanna, ajudou sim!!