Quando você aplica este css ao img:
img {
max-width: 100%;
height: auto;
}
em seguida, ele restringirá sua proporção e redimensionará normalmente, mas e outras tags, por exemplo, vídeo ou textarea? altura: automático; não funcionará para outros objetos além de img, mas há um bom método para obter um efeito semelhante:
HTML:
<div>
<textarea name=""></textarea>
</div>
CSS:
/* figure */.elastic-object {
height: 0;
width: 100%;
position: relative;
padding-bottom: 56.25%; /* = 9 * 100/16 = 16:9 */
}
.elastic-object > * {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
Demo: http://jsfiddle.net/tzaCD/
Isso é baseado neste ótimo artigo