Como redimensionar uma imagem dinamicamente com CSS à medida que a largura / altura do navegador muda?

Gostaria de saber como eu poderia redimensionar uma imagem junto com a janela do navegador,aqui foi o que fiz até agora (ou faça o downloadtodo o site em um ZIP)

Isso funciona bem no Firefox, mas tem problemas no Chrome: a imagem nem sempre é redimensionada, depende de alguma forma do tamanho da janela quando a página foi carregada.

Isso também funciona bem no Safari, mas às vezes a imagem é carregada com sua largura / altura mínima. Talvez isso seja causado pelo tamanho da imagem, não tenho certeza. (Se o carregamento estiver bom, tente atualizar várias vezes para ver o erro.)

Alguma idéia de como eu poderia tornar isso mais à prova de balas? (Se o JavaScript for necessário, também posso conviver com isso, mas o CSS é preferível.)

questionAnswers(7)

yourAnswerToTheQuestion