Estoy tratando de agregar un mapa de Google a mi diseño, que se supone que responde. He usado el mismo código que funciona para las imágenes ... Pero, por alguna razón, el iframe del mapa cambia de tamaño con dimensiones que no elegí.

HTML

<iframe src="http://maps.google.com/maps/ms?vpsrc=6&amp;ctz=-480&amp;ie=UTF8&amp;msa=0&amp;msid=210840796990572645528.00049770919ccd6759de3&amp;t=m&amp;ll=30.751278,68.203125&amp;spn=84.446143,175.429688&amp;z=2&amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300">    </iframe>​

y el CSS

iframe {
max-width: 100%;
height: auto;
width: auto; /*IE8 bug fix*/
vertical-align: middle;}

O puedes verlo en vivo y jugar aquí:http://jsfiddle.net/corinne/pKUzU/ (Si cortas el CSS, verás lo que quiero decir).

Mi pregunta es cómo hacer que este iframe / mapa sea sensible sin perder su altura deseada.