Boa tarde Alexandre,

Segue uma das formas para deixar a sua imagem responsiva, ou seja, ajustável de acordo com a largura total de um container ("pai") dessa imagem

Repare que

• Apenas para exemplo, setei uma largura máxima no container (cor de fundo em Azul Claro) de 25rem para poder limitar o tamanho total
• Na imagem setei uma a propriedade max-width para 100%, assim significa que a imagem sempre se ajustará ao máximo do espaço disponível do container ("pai") e a medida que eu diminuir o tamanho do navegador, repare que a imagem proporcionalmente irá diminuir também, uma vez que ela não tem no CSS uma definição fixa de largura

Dica

• Para sempre criar conteúdos responsivos, ou seja, que se adaptam de acordo com o tamanho da tela, procure utilizar unidades relativas (%, rem, em...) ao invés de pixels que são fixos (obs: não significa que você não deva usar pixels para nada, mas sim em ocasiões que realmente são necessárias)
• Inclusive indico a olhar outros cursos da própria Alura sobre responsividade: https://cursos.alura.com.br/course/html-css-responsividade-mobile-first / https://cursos.alura.com.br/course/html-css-responsividade-publicacao-projetos
• Deixo um link para estudo também: https://kinsta.com/pt/blog/design-responsivo-web/

Felipe D. R

Atenciosamente

Boa dica. colocar em % ou usar em acredito serem as melhores práticas. Pois em pixels, limita..

Perfeito Alexandre,

Se caso desejar considerar ainda a questão da possibilidade de os elementos da página em se adaptarem também de acordo com ZOOM no navegador (para aqueles usuários que precisam de ampliar a tela devido a dificuldades visuais) favorece a acessibilidade, você pode trabalhar com a unidade REM, o que é melhor ainda. Pois assim, os componentes que tiverem suas unidades definidas em REM, terão sua proporção ajustada de acordo com o ZOOM.

Atenciosamente

Felipe D.R

Consegui, obrigado pela ajuda!