deixando a imagem responsiva

Olá, Kaique.

Se você quer que a sua imagem fique com valor da height igual a largura do navegador, você pode usar a unidade de medida vw.

O vw é um porcentual, mas ela sempre pegará como referência o tamanho da tela do navegador. Por exemplo: se o navegador do usuário tem 400px de largura e você quer deixar sua imagem com 400px de altura você terá que definir o height da sua imagem com o valor de 100vw.

Tenta aplicar no seu código. Se não conseguir avisa aí :-)

Muito bom, tem como configurar um limite para a diminuição da imagem? por exemplo, a imagem vai diminuindo com a largura mas a partir de um tamanho de tela, a imagem vai ter sempre um tamanho especifico, para que ainda seja possível vela com clareza.

tipo, o que queria saber é o seguinte, quando você determina uma porcentagem para o width, ele atribuiu um valor para essa variável, então, se houver um comando que me retorne o valor dessa variavel (width) para aplicar em outra (height). assim o tamanho de uma imagem fica mais fácil de se colocar, é so saber a proporção entre largura e altura da imagem, além disso, esse tamanho é dinâmico, mesmo girando o celular por exemplo.

Kaique.

Já temos tipo variáveis no CSS, nós chamamos de Custom Properties ou Variable CSS. Infelizmente o suporte não é muito bom nós navegadores. Você pode ver o suporte nesse link: https://caniuse.com/#search=Custom%20Properties

Para usar esse custom properties é bem simples. Você consegui criar um variável global da seguinte forma:

:root {
    --largura: 100px;
}

E quando você quiser chamar o valor dela é da seguinte forma:

img {
    width: var(--largura);
}

Agora se o seu projeto precisa funcionar no Internet Exeplorer 11 (IE11) recomendo você dar uma estudada nos pré-processadores como SASS, LESS e Style.

entendi, com esse custom eu consigo acessar um valor do width? Ou é um valor que so pode ser setado por mim? Como se programa, sem o Custom Properties uma imagem que diminui automaticamente hoje em dia?

Oi kaique você consegue definir um tamanho minimo pra sua imagem utilziando CSS com a propriedade min-width . A propriedade min-width é usada para definir a largura mínima de um elemento.

Isso evita que o valor da largura da propriedade seja menor do que a largura mínima. Espero ter ajudado

Oi kaique de oliveira, caso persista alguma dúvida a respeito desse exercício ou curso pode perguntar aqui mesmo ou se você não tiver mais nenhuma dúvida a respeito você pode marcar uma resposta como solução, finalizando assim esse tópico.Espero ter ajudado. Bons estudos.