problema con redimension de imagen verticalmente

[mensajeescrito]

Hola buenas veran, tengo un algo que me funciona a medias:

se trata de redimensionar una imagen cuando la ventana del navegador la hago mas pequeña.

el tema esta que cuando la ventana del navegador la estrecho por el ancho, entonces la imagen se redimensiona proporcionalmente.

pero cuando estrecho la ventana verticalmente no se redimensiona, se queda como esta.


¿por que puede ser , en que me estoy equivocando que no logro dar con la solucion?

este es el codigo css:

Código CSS:

#micro_imagenes {
 
    position:absolute;
    margin-top:154px;   
    margin-left:0px;
    
    width: 100%;
    height:100%;
    
    /*
    width:986px;
    height:459px;
    */
            
    z-index:3;
        
    }   
 
 
 
#micro_imagenes img {   
    
    max-width: 100%;
    height: auto;
    
    /*
    width:986px;
    height:459px;
    */
    
    }
 

gracias de antemano a todos.

[pzin]

height: auto no hace nada. Es el valor por defecto que tienen casi todos los elementos en CSS. Tendrás que ponerle lo mismo que le pones para el ancho para que tenga el mismo comportamiento.

Código CSS:

min-height: 100%
 

[mensajeescrito]

he hecho lo que tu me has dicho pero ahora tengo 2 problemas:

el primero que la imagen se me ha hecho muy muy grande .

el segundo que cuando estrecho horizontalmente o verticalemente , se redimensiona , si , pero se deforma , no lo hace proporcionalmente ¿?¿ help!!!

[pzin]

Obviamente se deforma, porque estás indicando ambos valores. Cuando indicas un sólo valor, el otro es calculado automáticamente.

Lo único que podrías hacer es poner la imagen como fondo de un elemento, y luego a ese elemento indicarle los anchos y altos necesarios, y luego poner algo tipo:

Código CSS:

background-size: cover
 

[madman_18]

A mí hay algo que me sirve bastante (no sé si será correcto o no) es poner algo tal que así:

Código CSS:

.mibloque{
width:auto;
height:auto;
max-width:400px;
max-height:300px;
}
.mibloque img{
width:100%;
height:100%;
max-width:400px;
max-height:300px;
}
 

Código HTML:

<div class='mibloque'>
        <img src='mifoto.jpg'/>
</div>
 

Así mi imagen, cuando tengo que hacer el responsive design, con ir cambiando el los % de .mibloque img, me permite ir jugando con él, que el bloque no tenga un tamaño más allá de lo que me abarca la imagen. Quizás te ayude eso

[pzin]

madman_18 el problema es que eso también deforma la imagen, ¿no?