¿Cómo puedo cambiar el tamaño de una imagen dinámicamente con CSS a medida que cambia el ancho / alto del navegador?

Me pregunto cómo podría cambiar el tamaño de una imagen junto con la ventana del navegador,aquí es lo que he hecho hasta ahora (o descargartodo el sitio en un ZIP)

Esto funciona bien en Firefox, pero tiene problemas en Chrome: la imagen no siempre cambia de tamaño, de alguna manera depende del tamaño de la ventana cuando se cargó la página.

Esto también funciona bien en Safari, pero a veces la imagen se carga con su ancho / alto mínimo. Tal vez esto sea causado por el tamaño de la imagen, no estoy seguro. (Si se carga bien, intente actualizar varias veces para ver el error).

¿Alguna idea sobre cómo podría hacer esto más a prueba de balas? (Si se necesita JavaScript, también puedo vivir con eso, pero es preferible CSS).

Respuestas a la pregunta(7)

Su respuesta a la pregunta