¿Cómo cambiar el tamaño de la imagen de forma dinámica en css?

Tengo una página html + css simple que tiene 3 imágenes. Estoy tratando de cambiar el tamaño de la página según el tamaño de la ventana del navegador. En este momento, tengo las 3 imágenes en un div que se establece en una altura como un porcentaje de los contenedores que lo rodean, y las imágenes se establecen en altura: 100% y ancho: automático. ahora, eso funciona bien si cambias el tamaño de toda la ventana, pero si solo cambias el ancho, no cambiarán el tamaño, por supuesto, ya que la altura no cambió, y terminan siendo empujados hacia abajo de la página, lo cual es realmente feo.

mi primera pregunta: ¿hay una buena manera de hacer que las imágenes cambien de tamaño sin importar si cambias la altura O el ancho del navegador usando solo html / css? Si no, ¿debería estar usando jquery y, de ser así, puede señalarme un buen recurso?

Segunda pregunta: si no es posible, ¿cómo puedo al menos evitar que salgan despedidos? Intenté hacer que el desbordamiento se ocultara o se desplazara, pero aún así se golpean, y luego, o bien se corta, tienes que desplazarte verticalmente.

Aquí hay un enlace a la página en vivo: http://carissalyn.com/Landing.html (sí, me doy cuenta de que las imágenes se cargan lentamente, las comprimiré antes de que estén activas). Hágame saber si necesita cualquier otra información.

Aquí está el CSS relevante (contenedor img está dentro de Fadingtext que está dentro del cuerpo):

body,html{ height:100%; margin:0; padding:0; } #imgcontainer{ height: 100%; width: 90%; display: inline-block; } img { max-height:90%; width: auto; } #fading_text { text-align: center; height: 60%; -webkit-animation: fade-text 20s 1; -moz-animation: fade-text 20s 1; } 

Y aquí está el html relevante para aclarar que hay 3 imágenes:

  

Intente buscar artículos sobre ResponsiveUI, que le brindarán mucha información útil. “autoescalar” podría hacerse con el siguiente código:

 
.wrapper img { width: 100%; max-width: 100% height: 100%; }