Redimensionar uma imagem para caber na janela do navegador sem distorção

Redimensionar uma imagem para caber na janela do navegador é uma tarefa comum com soluções aparentemente simples. No entanto, aderir a requisitos específicos, como preservar proporções e evitar cortes, pode apresentar desafios.

Solução sem barras de rolagem e Javascript (somente CSS)

Esta solução usa CSS Grid para garantir que o contêiner da imagem ocupe toda a altura da janela. A imagem é então definida para caber horizontal e verticalmente dentro desse contêiner, preservando sua proporção e evitando a adição de barras de rolagem.

Solução com JQuery

Se Javascript estiver disponível , outra abordagem é:

Aqui, a altura do corpo é definida para corresponder à altura da janela, garantindo que a propriedade max-height na imagem funcione corretamente. O evento de redimensionamento da janela também é tratado para ajustar automaticamente a altura do corpo e o tamanho da imagem quando a janela é redimensionada.