Percebi que conforme vai reduzindo a página a imagem vai se ajustando, porém, não fica comprimida para vermos a imagem inteira e bem pequena, por que isso acontece?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Percebi que conforme vai reduzindo a página a imagem vai se ajustando, porém, não fica comprimida para vermos a imagem inteira e bem pequena, por que isso acontece?
Boa tarde Vanessa, tudo bem?
No seu caso, a imagem provavelmente tá se ajustando responsivamente, mas não está sendo redimensionada proporcionalmente. Isso significa que a largura da imagem está diminuindo para caber na tela, mas a altura está sendo mantida, o que resulta em faixas pretas na parte superior e inferior.
Pra resolver esse problema, você pode utilizar a propriedade object-fit do CSS. Essa propriedade permite definir como a imagem deve se adaptar ao seu container.
Existem três valores principais para a propriedade object-fit:
No seu caso, a melhor opção provavelmente seria usar o valor fill. Isso garantirá que a imagem seja redimensionada proporcionalmente para caber no container, sem faixas pretas.
img {
object-fit: fill;
}
Espero que te ajude.