CSS - Utilizar max-height para diferentes resoluciones

Que tal, intento definir el tamaño de unas imágenes con ayuda de una clase css (.img-iluminar) basándome en la resolución de la pantalla.

Para el ancho utilizo

@media screen and (max-width: 1366px) and (min-width: 1366px) {.img-iluminar { width:330px;} }

@media screen and (max-width: 1280px) and (min-width: 1280px) {.img-iluminar { width:308px;} }

y no he tenido ningún problema; Pero para la altura utilizo

@media screen and (max-height: 800px) {.img-iluminar { height:273px;
margin-bottom:10px;} }


@media screen and (max-height: 768px) {.img-iluminar { height:255px;
margin-bottom:10px;} }


@media screen and (max-height: 720px) {.img-iluminar { height:235px;
margin-bottom:10px;} }

y sólo me permite utilizar un una media query o sólo me toma la del final para todas las resoluciones. Alguien sabe cómo utilizar las media querys con base en la altura de la resolución para definir la altura de las imágenes o alguna otra manera para controlar la altura de las imágenes en base a la altura de la resolución.

Saludos Eduardo,

vamos a intentar ver claro el concepto, entenderlo bien...

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery_breakpoints

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_columns

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Por último, adapatarlo a cualquier necesidad. Sólo hay que cambiar los atributos y sus valores, de los ejemplos por los tuyos. Respetando las cabeceras de la/s página/s de ejemplo/s (importante).

Espero sea útil.