Duda con ajuste de tamaño de una imagen

[Xelot]

Tengo el siguiente código:

Código:

#image > img{
    max-width: 80%;
    max-height: 35vw;
    height: 100%;
    width: 100%;
}

Quiero que la imagen sea lo mas grande posible dentro de esos máximos. El problema es que si la imagen base es muy alta, esta se deforma. ¿Alguna manera de que la image se ajuste pero sin deformarse?

Edito: He probado también metiéndolo en un div:

Código:

#image{
    margin-right: auto;
    margin-left: auto;
    max-width: 80%;
    max-height: 35vw;
}
img{
    height: auto;
    width: 100%;
}

Pero por desgracia la imagen sobresale por fuera de los límites del div, este parece no poder contenerlo...

[NueveReinas]

¿Has probado con esto?

Código CSS:

img {
max-width: 100%;
height: auto; 
}
 

[Xelot]

Muy al principio probe con esto:

Código:

#image > img{
    max-width: 80%;
    max-height: 35vw;
    height: auto;
    width: auto;
}

Muestra lo que yo quiero, pero el problema es que al no definir un mínimo, si reescalo la vista del navegador, la imagen se puede hacer mas pequeña. Yo lo que quiero es que, aunque reescale la vista, siempre sea lo mas grande posible dentro de esos márgenes.

[NueveReinas]

Entonces prueba a ponerle un min-width y/o min-height con el tamaño de la imagen.

[Xelot]

Si hiciera eso la imagen no mantendría las proporciones...

[NueveReinas]

Iniciado por Xelot

Si hiciera eso la imagen no mantendría las proporciones...

Error mío.
¿Por qué no simplemente le pones una altura automática?

http://jsfiddle.net/ehL4kh74/

[Xelot]

Código:

height: auto;
width: 80%;

Aunque supongo que te refieres a eso, no es lo que busco. De todas formas te dejo un +1 por intentarlo. Supongo que intentaré hacer las cosas de otra manera...